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后的函数，需要手动执行（永久修改）

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 没有冒泡机制，不能代理

事件循环