js 基础补充3

1. 闭包

在函数内部定义的函数，可以访问改函数的属性和方法

私有属性延长变量的生命周期，更好的避免命名冲突

缺点：内存消耗比较大，不建议频繁使用

2. js 原型原型链

访问对像的属性方法，不光会在对象上查找还会在原型上查找每个对象都有一个原型对象

指向构造函数的原型protoType

原型对象也存在原型，类推一级一级给上查找，形成了原型链

Person 实例对象 p1

p1.__proto__ === Person.prototype

Person.prototype.__proto__ === Object.prototype

Object.prototype.__proto__ === null

Object.__proto__ === Function.prototype

3. js 继承

不使用Object.create()

原型链 child.prototype = new Parents() 指向同一内存地址互相影响

构造函数 function child(){Parents.call(this)} 只能反问函数内部定义的属性方法不是完整的原型链

组合 1+2 调用两次方法影响性能

使用Object.create()

原型式内存地址互相影响

寄生不能继承原型是上的方法

整体组合类似 ES6 新增的 extends

4. this

箭头函数的this 在创建时候已经确认了

绑定方式
默认没有其他规则 this 默认指向全局对象（除严格模式下）

隐式绑定是指通过对象调用函数时，this 指向调用该函数的对象。

new 绑定是指通过 new 关键字来创建一个新对象时，this 指向新创建的对象。

显示（apply bind call ） call 返回的函数列表

this在不同上下文指向不同属性方法

apply call bind 的区别

三者都是用于显示的改变this指向的

第一个参数表示this指向的对象，若为空/null 则指向windows

第二个参数 apply 以数组形式传递，call 以参数列表的形式传递两者都只能一次传递 bind可以多次传递

apply call 都是立即执行（一次性修改）bind 返回修改this后的函数，需要手动执行（永久修改）
javascript">function test(...args){console.log(...args)console.log(this.name,this.age);}
const _obj = {name:'lili',age:18
}
test.apply(_obj,[1,2,3])
test.call(_obj,1,2,3)
const newFun = test.bind(_obj,1)
newFun(2,3)

5. instanceof typeof 区别

instanceof(实例是否属于对象没法准确判断基本数据类型) typeof （基本数据类型不能区分数组和对象）

可以使用Object.prototype.toString.call() 判断

6.new 操作符干了什么（new 操作符用于创建构造函数的实例对象）

1.创新一个新的对像

2.把对象的原型绑定到构造函数的原型

3.将构造函数中的 this 绑定到新创建的对象

5. 构造函数没有return ，则返回新对象

手写 new 操作符

7. 执行上下文

执行上下文: 代码运行时所在的环境

全局 ,函数 ,eval Eval 函数执行时会创建一个 eval 执行上下文

创建阶段 (变量方法 this 作用域链) 词法环境提供变量函数声明（静态），变量环境根据这些信息存储管理值 =>

执行阶段代码执行 =>

回收执行上下文出栈

执行栈先进后出

8.事件

事件：用户和网页交互的结果

事件流：事件在页面传递顺序
三个阶段

捕获阶段（从大到小） -》目标阶段-》冒泡阶段（小小到大

事件模型：定义如何处理事件

DOM Level 0 和 DOM Level 2 是两种主要的事件模型。

直接在标签上添加On-Event 例如OnClick 不能移除不能重复使用

利用 addEventListener('click',()=>{}) 一次添加定多个事件处理程序

事件代理

把一个/或一组响应事件委托给另一个事件（在冒泡阶段），真正绑定的是父元素

场景：监听多个li变化，把事件绑定在ul上

优点：动态绑定减少工作量，减少整个页面所需内存，提高效率

避免对鼠标移动绑定，需要计算详细位置，消耗更大 focus blur 没有冒泡机制，不能代理