js基础与高级

尘珩

已于 2022-04-21 09:12:59 修改

阅读量797

点赞数 1

分类专栏： javascript 文章标签： javascript

于 2022-04-21 08:59:12 首次发布

本文链接：https://blog.csdn.net/m0_58656423/article/details/124312742

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Dom

ul.appendChild(li)将li放进ul中

使用Dom操作css

获取元素样式

元素名.style.样式名（只能读取内联样式）
元素.currentStyle.样式名（读取正在显示的样式），没设置样式，获取默认样式（只有IE支持）
getComputedStyle(“要获取样式的元素”,“传递一个为元素，一般传null”)（其他浏览器可以使用该方法，IE8不支持）
- 该方法会返回一个对象，对象中封装了当前元素对应样式，可以通过对象.样式名读取样式
- 获取的样式没有设置会获取到真实的值，而非默认（比如width:auto,不会显示auto，会显示真是的值）
- currentStyle和getComputedStyle都是只读的，不能修改，修改要通过getComputedStyle
- 解决浏览器兼容问题
clientWidth和clientHeight这两个属性可以获取可见宽度和高度（包括内容区和内边距），这些属性都不带px，返回的是数字，可以直接进行计算，不能用于修改，只是的返回值，只读

事件对象

当事件的响应函数被触发时，浏览器每次都会将一个时间对象作为实参传递进响应函数
在IE8时，浏览器不会传时间对象
在事件对象中封装了当前时间的一切信息（鼠标坐标
target：返回触发事件目标

<body>
    <div id="a1" style="border: solid;width: 800px;height: 500px;">
    </div>
    <div id="b1" style="border: solid;width: 100px;height: 100px;">

    </div>
    <script>
        var div1 = document.querySelector("#a1")
        var div2 = document.querySelector("#b1")
        div1.onmousemove=function(event){
            console.log(event);
            let x = event.x
            let y = event.y
            div2.innerHTML=`x:${x}  y:${y}`
        }
    </script>
</body>

page.x，page.y可以相对窗口获得坐标
- IE8不支持

事件冒泡（Bubble）

后代元素的事件触发时，祖先元素相同事件也会被触发
解决方法
- event.cancelBubble = true 可以将cancelBubble设置为true，即可取消冒泡

事件委派

我们希望只绑定一次事件，即可应用到多个元素上，可以通过绑定给其相同的父元素，当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件，叫做事件委派

事件绑定

平时使用对象.事件=函数形式绑定响应函数，不能绑定多个会覆盖掉 div.onclick()=function(){}
addEventListener()通过这个方法也可以绑定响应函数(IE8及以下浏览器不支持)
- 参数（this指向事件绑定的对象）
  - 1.事件的字符串，不需要写on，（click，mouseover）
  - 2.回调函数，当事件触发时该函数会被调用
  - 3.是否在捕获阶段触发事件，需要bool值，一般传false，想在捕获阶段触发事件，可以设置为true
  - ```
  btn.addEventListener("click",function(){},false)
```
attachEvent()可以在IE8使用
- 参数（this指向window）
  - 事件的字符串，需要写on，（onclick，onmouseover）
  - 回调函数，当事件触发时该函数会被调用
  - 这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是先绑定后执行
  - ```
  btn.attachEvent("click",function(){})
```

事件传播

BOM(浏览器对象模型)

通过js操作浏览器
BOM对象
- Window
  - 代表整个浏览器的窗口，同时也是网页中的全局对象
- Navigator
  - 代表当前浏览器的信息，通过该对象可以来识别不同浏览器
- Location
  - 代表浏览器地址栏信息。可以用来跳转页面
- History
  - 代表浏览器的历史纪录，可以通过该对象来操作浏览器的历史纪录，该对象不能获取具体的历史记录，只能操作向前向后翻页，而且该操作只在当此访问时有效
- Screen
  - 代表用户屏幕信息，可获取显示器相关信息
- 都是作为window对象的属性进行保存的，可通过window使用，也可直接使用

Navigator

由于历史原因，大部分属性已经不能帮助我们识别浏览器了
一般我们只会用userAgent来判断浏览器信息
- userAgent是一个字符串，包含描述浏览器信息的内容

History

length，获取当前访问的链接数量
```
console.log(history.length())
```
back(),可以用来回退上一个页面
forward(),可以跳转下一个页面
go(x),可以前进或后退几个页面,跳转指定页面

history.back()
history.forward()
history.go(2)
history.go(-2)

Location

直接打印location可以获取到地址栏的信息(当前页面完整路径)
- alert(location)
- location相当于location.href
assign()加载新的文档，跳转到其他页面，作用和直接修改location一样
reload()重新加载当前文档，重新加载当前页面，跟刷新按钮功能相同
- true作为参数，会强制清除缓存刷新
replace()加载新的页面，替换当前页面，跳转其他页面（跳完了不能回退，不会生成历史纪录）

location.assign("https://www.baidu.com/")
location.reload(true)
location.replace("https://www.baidu.com/")

JSON

特殊格式的字符串，可以被任意语言识别，并转换为任意语言的对象
在IE7一下不支持
json允许的值：
- 1.字符串
- 2.数值
- 3.布尔值
- null
- 对象（不包含函数）
- 数组
json分类:
- 1.对象 ‘{“name”:“魈”,“age”:18}’
- 2.数组’[1,2,3,“hello”]’
在js中，为我们提供了一个工具类，JSON
- 可以实现JSON和对象的相互转化
- JSON.parse()将JSON字符串转化为js对象,并返回
- JSON.stringify()将js对象转化为JSON字符串
eval(”alert(“xxx”)“)可以将js代码执行出来
- 如果eval()执行的字符串含有{}，会将{}当成代码块
- 不希望将{}当成代码块解析，在字符串前后各加一个()
- 性能太差了，不用，不安全

JS高级

数据类型

基本（值）类型
- string
- numbel
- boolean
- undefined:undefined
- null:null
- symbol
引用（对象）类型
- object:任意对象
- function:一种特别的对象（可以执行）
- array：一种特别的对象（数值下标属性）
判断
- typeof
  - 返回数字类型的字符串表达
  - 可以判断undefined /数值/字符串/布尔值
  - 不能判断object和null 不能区别object与array
  - ```
  var a
  console.log(a,typeof a);//underfined  "underfined"
  var b = null
  console.log(a,typeof a,a === null);//null object true
```
- instanceof
- === / ==
  - 可以判断null,undefined

数据,变量与内存

什么是数据？
- 存储在内存中代表特点信息的
什么是内存？
- 可存储数据的数据空间
什么是变量？
- 可变化的量，由变量名和变量值组成
- 每个变量都对应的一小块小内存，变量名用来查找对应的内存

回调函数

你定义的函数，但你没有调用，但他执行了
ajax回调函数
声明周期回调函数

IIFE

立即执行函数表达式：Immediately-Invoked Function Expression
(function(){匿名函数自调用})()
作用：
- 隐藏实现
- 不会污染外部命名空间

执行上下文与上下文栈

变量提升

function a (){}//函数提升
var a = function(){}//变量提升

执行上下文

代码分类
- 全局代码
- 局部代码
全局执行上下文
- 在执行全局代码前，将window确定为全局执行上下文
- 对全局数据进行预处理
  - var定义的全局变量==>undefined,添加为window属性
  - function声明的全局函数==>赋值(fun)，添加为window方法
  - this==>赋值window
- 开始执行全局代码
函数执行上下文
- 在调用函数，准备执行函数体之前，创建对应的函数执行上下文对象（虚拟，存在在栈中）
- 对局部数据进行预处理
  - 形参变量==>赋值(实参)==>添加为执行上下文属性
  - argument==>赋值（实参列表）,添加为执行上下文属性
  - var定义的全局变量==>undefined,添加为执行上下文属性
  - function声明的全局函数==>赋值(fun),添加为执行上下文属性
  - this==>赋值（调用函数的对象）
  - 开始执行函数体代码

执行上下文栈

面试题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(i);
        var i = 1
        foo (i)
        function foo(i){
            if(i==4){
                return;
            }
            console.log("b"+i);
            foo(i+1);
            console.log('end'+i);
        }
        console.log(i);
    </script>
</body>
</html>

if(!(a in window)){
            var a = 1
        }
        console.log(a);//underfined
var c = 1
function c(c){
	console.log(c);
	var c = 3
        }
       c(c)//c不是一个function

作用域与作用域链

全局作用域
函数作用域
块作用域
隔离变量，不同作用域下同命名变量不会有冲突
作用域与执行上下文
区别1
- 全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时已经确定了，而不是在函数调用时
  - 全局执行上下文环境是在全局作用域确定之后，js代码马上执行前创建
  - 函数执行上下文是调用函数时，函数体代码执行前确定的
- 区别2
  - 作用域是静态的，执行上下文是动态的，调用函数时创建，函数调用结束时就会释放
- 联系
  - 执行上下文环境（对象）是从属于所在的作用域的
作用域链是一种自内而外，找变量的一种作用域

面试题

闭包

如何产生闭包：
- 当一个嵌套内部（子）函数引用了嵌套外部（父）函数的变量（函数）时，执行函数定义时，就会产生闭包
什么是闭包？
- 闭包存在于嵌套函数中，包含函数体所引用的变量的内部函数

常见闭包

在这里插入图片描述

产生几个闭包？外部函数执行几次
闭包的作用
- 使用函数内部的变量在函数执行完之后，仍存在内存中（延长了局部变量）
- 让函数外部可以操作（读写）到函数内部数据（变量/函数）
闭包的生命周期
- 产生：在镶嵌内部函数定义执行完时就产生了（不是在调用的时候）
- 死亡：在嵌套内部函数成为垃圾对象时

自定义js模块

用闭包实现模块化

需要var a = myModule(),才能使用闭包

虚拟函数自调用

可以直接使用闭包

闭包缺点

函数执行完成后，函数内部的局部变量没有释放，占用内存时间会变长
容易造成内存泄漏
解决：
- 能不用闭包就不用
- 及时释放（使内部函数成为垃圾对象，从而释放闭包）

内存溢出与内存泄漏

内存溢出
- 一种程序运行的错误
- 当程序运行需要内存超过剩余内存时，就抛出内存溢出的错误
内存泄漏
- 占用的内存没有及时释放
- 内存泄漏积累多了容易内存溢出
- 常见的内存泄漏
  - 意外的全局变量
  - 没有及时清理定时器和回调函数
  - 闭包

线程与进程

进程：程序执行的一次过程
线程：进程内一个独立的执行单元，是程序执行的一个完整的流程，是cpu的最小调度单元

比较单线程与多线程
- 多线程：
  - 能够有效提高cpu利用率
  - 创建多线程开销
  - 线程间切换开销
  - 死锁与状态同步问题
- 单线程
  - 顺序编程简单易懂
  - 效率低
js是单线程还是多线程
- 单线程
- 使用H5中的web workers可以多线程运行
浏览器运行时单线程还是多线程
- 多线程
浏览器运行是单进程还是多进程
- 单进程多进程都有

定时器

js的单线程执行

代码分类
- 初始化代码
- 回调代码
js引擎执行代码的基本流程：
- 先执行初始化代码，包含一些特别的代码（回调函数===>异步执行（只有初始化代码执行后才会进行异步执行））
  - 定时器
  - 监听绑定
  - ajax请求
- 然后执行回调代码

 const a = Date.now()
        setTimeout(()=>{
            console.log("1111111");
            
        },2000)
        setTimeout(()=>{
            console.log("2222");
        },1000)
        console.log(a);
        while( (Date.now() - a )< 3000  ){
        }

//3秒后同时输出2222和1111111