你不知道的JS

 一、JS理论内容

01.事件循环机制

---

02.JS闭包

// 1.什么是闭包?
外层函数的作用域 + 内层函数 = 闭包

// 优点
（1）可以共享作用域。
（2）可以解决一些问题。

// 缺点
（1）内存泄漏（仅限于ie浏览器，其他浏览器不存在内存泄漏。）
（2）占用内存资源。

---

03.原型链

1. 什么是原型链?

//  函数也是对象
(1) 构造函数既是一个函数，也是一个对象，Function是c++提供的函数，用于创建构造函数用的。（Function理解为创世神一般的存在）

//  只要是个对象，就有__proto__属性
(2) 每个对象都有一个原型对象，通过该'对象.__proto__'可以访问的到原型对象。

//  只要是个函数，就有prototype属性
(3) 每个函数有一个原型对象，通过'函数名.prototype'。（原型对象： 就是创造者的原型对象）

2. 一张图看懂原型链

3. 原型链使用场景

//  1.如果想让所有对象，都拥有同一个属性或方法，可以这样做。
Object.prototype.myMethod = function() {
	console.log("该方法让所有调用者共享")
}

************************************************************************************

//  2.如果想让所有的函数，同时拥有一个方法，可以这样做：
Function.prototype.bind = function() {
	console.log("这就是为什么函数能调用bind方法")
}

************************************************************************************
    
//  3.创建一个干净的对象，即：一个没有原型的对象。（调用Object.create(原型对象, [属性组成的对象])）  
const obj = Object.create(null)
const user = {
    name: '思密达'，
    age: 15
}    
Object.serPrototyOf(user, obj)	// 含义：把对象user的原型对象设置为obj。
    
************************************************************************************   
    
//  4.一次性往原型上添加多个属性/方法    
Star.prototype = {
  constructor: Star, 	// 看过来，需要将原型对象的constructor属性加回去，才能保证原型链不断开。
  sing: function(){},
  dance: function(){}
}    

---

03.Promise

 1. Promise的机制

两个阶段，三个状态（单词pending、fulfilled、rejected要背出来）

2. Promise的链式调用规则

(1) 情况1：pro1执行完，pro2对pro1进行了处理，就看pro2自身的处理结果。

(2) 情况2：pro1执行完，但是pro2没有对pro1进行处理，那么pro2的状态和pro1一致。

 3. Promise常用api

方法名	含义
Promise.resolve(data)	直接返回一个完成状态的任务
Promise.reject(reason)	直接返回一个拒绝状态的任务
Promise.all(任务数组)	必须全部成功，结果才是成功。但凡有一个没成功，最终就是失败。
Promise.any(任务数组)	只要有一个成功，结果就是成功。只有全部失败，结果才是失败。
Promise.allSettled(任务数组)	必须全部是已决状态，不能是pending状态，但凡有一个是pending，结果就是失败。
Promise.race(任务数组)	看任务数组中，不管对错，哪一个先有结果，最终状态和先有结果的那个状态一致。

4. async和await（语法糖）

 1. 你是如何理解Promise?（面试）

（1）先谈回调函数：在没有Promise之前，是用回调函数来解决异步操作的。
     缺点： 不是真正的异步代码，存在回调地狱问题。

（2）再谈Promise的优缺点。
     优点：是真正的异步代码，不存在回调地狱问题。

2. Promise如何捕获错误?（面试）

(1) 使用catch方法。
(2) 使用 try-catch机制。

3. Promise的all和race方法有什么区别？（面试）

4. setTimeout、Promise、async/await有什么区别？

setTimeout是宏任务，Promise是微任务，async/await是Promise+generator的语法糖。

---

04.new操作符发生了什么

// 原理
function create(fn, ...args) {
    // 先创建一个空对象。
    let obj = {}
    // 把空对象的原型，指向构造函数的原型。
    Object.setPrototype(obj, fn.prototype)
    // 把空对象作为构造函数的上下文。（改变this指向）
    let result = fn.apply(obj, args)
    // 对构造函数有返回值的处理判断
    return result instanceof Object ? result : obj
}


// 举例：
function Foo() {
    this.name = '张三'
    return 123
}
console.log( new Foo() )   // 空

function Foo() {
    this.name = '张三'
    return {1, 2, 3}
}
console.log( new Foo() )   // {1, 2, 3}

function Foo() {
    this.name = '张三'
    return [1, 2, 3]
}
console.log( new Foo() )   // [1, 2, 3]

---

05.回流、重绘

1. 什么是回流?   就是重新计算DOM节点的大小、位置。（耗费性能）

// 1.引起回流的情况
（1）修改DOM的几何信息的大小、位置。（例如：width、height、margin、padding）
（2）读取DOM的几何信息的大小、位置。（例如：clientWidth、clientHeight）

// 2.浏览器对回流的优化：如果发生了连续回流，就只会回流一次。
dom.style.width = '100px'
dom.style.height = '200px'
dom.s