「2021」高频前端面试题汇总之JavaScript篇（下）

桃扇骨 2022-11-06 09:51 6阅读 0赞

### 系列文章： ###

【1】[「2021」高频前端面试题汇总之HTML篇][2021_HTML]

【2】[「2021」高频前端面试题汇总之CSS篇][2021_CSS]

【3】[「2021」高频前端面试题汇总之浏览器原理篇][2021]

【4】[「2021」高频前端面试题汇总之计算机网络篇][2021 1]

【5】[「2021」高频前端面试题汇总之Vue篇][2021_Vue]

【6】[「2021」高频前端面试题汇总之React篇][2021_React]

【7】[「2021」高频前端面试题汇总之JavaScript篇（上）][2021_JavaScript]

【8】[「2021」高频前端面试题汇总之JavaScript篇（下）][2021_JavaScript 1]

【9】[「2021」高频前端面试题汇总之性能优化篇][2021 2]

### 目录 ###

*   *   *  系列文章：
     *  一、异步编程
     *   *  1. 异步编程的实现方式？
         *  2. setTimeout、Promise、Async/Await 的区别
         *   *  （1）setTimeout
             *  （2）Promise
             *  （3）async/await
         *  3. 对Promise的理解
         *  4. Promise的基本用法
         *   *  （1）创建Promise对象
             *  （2）Promise方法
         *  5. Promise解决了什么问题
         *  6. Promise.all和Promise.race的区别的使用场景
         *  7. 对async/await 的理解
         *  8. await 到底在等啥？
         *  9. async/await的优势
         *  10. async/await对比Promise的优势
         *  11. async/await 如何捕获异常
     *  二、异步代码输出
     *   *  一、Promise基础
         *   *  1、下面代码的执行结果是
             *  2、下面代码的执行结果是
             *  3、下面代码的执行结果是
             *  4、下面代码的执行结果是
             *  5、下面代码的执行结果是
             *  6、下面代码的执行结果是
             *  7、下面代码的执行结果是
         *  二、Promise的catch、then、finally
         *   *  8、下面代码的执行结果是
             *  9、下面代码的执行结果是
             *  11、下面代码的执行结果是
             *  12、下面代码的执行结果是
             *  13、下面代码的执行结果是
         *  三、Promise的all和race
         *   *  15、下面代码的执行结果是
             *  16、下面代码的执行结果是
             *  17、下面代码的执行结果是
         *  四、Async、await
         *   *  18、下面代码的执行结果是
             *  19、下面代码的执行结果是
             *  20、下面代码的执行结果是
             *  21、下面代码的执行结果是
             *  22、下面代码的执行结果是
             *  23、下面代码的执行结果是
         *  五、综合题目
         *   *  24、下面代码的执行结果是
             *  25、下面代码的执行结果是
             *  26、下面代码的执行结果是
             *  27、下面代码的执行结果是
     *  三、面向对象
     *   *  1. 对象创建的方式有哪些？
         *  2. 对象继承的方式有哪些？
         *  3. 如何判断一个对象是否属于某个类？
     *  四、垃圾回收与内存泄漏
     *   *  1. 浏览器的垃圾回收机制
         *   *  （1）垃圾回收的概念
             *  （2）垃圾回收的方式
             *  （3）减少垃圾回收
         *  2. 哪些情况会导致内存泄漏

## 一、异步编程 ##

### 1. 异步编程的实现方式？ ###

JavaScript中的异步机制可以分为以下几种：

*  **回调函数**的方式，使用回调函数的方式有一个缺点是，多个回调函数嵌套的时候会造成回调函数地狱，上下两层的回调函数间的代码耦合度太高，不利于代码的可维护。
 *  **Promise** 的方式，使用 Promise 的方式可以将嵌套的回调函数作为链式调用。但是使用这种方法，有时会造成多个 then 的链式调用，可能会造成代码的语义不够明确。
 *  **generator** 的方式，它可以在函数的执行过程中，将函数的执行权转移出去，在函数外部还可以将执行权转移回来。当遇到异步函数执行的时候，将函数执行权转移出去，当异步函数执行完毕时再将执行权给转移回来。因此在 generator 内部对于异步操作的方式，可以以同步的顺序来书写。使用这种方式需要考虑的问题是何时将函数的控制权转移回来，因此需要有一个自动执行 generator 的机制，比如说 co 模块等方式来实现 generator 的自动执行。
 *  **async 函数** 的形式，async 函数是 generator 和 promise 实现的一个自动执行的语法糖，它内部自带执行器，当函数内部执行到一个 await 语句的时候，如果语句返回一个 promise 对象，那么函数将会等待 promise 对象的状态变为 resolve 后再继续向下执行。因此可以将异步逻辑，转化为同步的顺序来书写，并且这个函数可以自动执行。

### 2. setTimeout、Promise、Async/Await 的区别 ###

#### （1）setTimeout ####

console.log('script start')	//1. 打印 script start
    setTimeout(function(){ 
        console.log('settimeout')	// 4. 打印 settimeout
    })	// 2. 调用 setTimeout 函数，并定义其完成后执行的回调函数
    console.log('script end')	//3. 打印 script start
    // 输出顺序：script start->script end->settimeout

#### （2）Promise ####

Promise本身是**同步的立即执行函数**， 当在executor中执行resolve或者reject的时候, 此时是异步操作， 会先执行then/catch等，当主栈完成后，才会去调用resolve/reject中存放的方法执行，打印p的时候，是打印的返回结果，一个Promise实例。

console.log('script start')
    let promise1 = new Promise(function (resolve) { 
        console.log('promise1')
        resolve()
        console.log('promise1 end')
    }).then(function () { 
        console.log('promise2')
    })
    setTimeout(function(){ 
        console.log('settimeout')
    })
    console.log('script end')
    // 输出顺序: script start->promise1->promise1 end->script end->promise2->settimeout

当JS主线程执行到Promise对象时，

*  promise1.then() 的回调就是一个 task
 *  promise1 是 resolved或rejected: 那这个 task 就会放入当前事件循环回合的 microtask queue
 *  promise1 是 pending: 这个 task 就会放入 事件循环的未来的某个(可能下一个)回合的 microtask queue 中
 *  setTimeout 的回调也是个 task ，它会被放入 macrotask queue 即使是 0ms 的情况

#### （3）async/await ####

async function async1(){ 
       console.log('async1 start');
        await async2();
        console.log('async1 end')
    }
    async function async2(){ 
        console.log('async2')
    }
    console.log('script start');
    async1();
    console.log('script end')
    // 输出顺序：script start->async1 start->async2->script end->async1 end

async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再执行函数体内后面的语句。可以理解为，是让出了线程，跳出了 async 函数体。  
举个例子：

async function func1() { 
        return 1
    }
    console.log(func1())

![在这里插入图片描述][20210308230437407.png]

很显然，func1的运行结果其实就是一个Promise对象。因此也可以使用then来处理后续逻辑。

func1().then(res => { 
        console.log(res);  // 30
    })

await的含义为等待，也就是 async 函数需要等待await后的函数执行完成并且有了返回结果（Promise对象）之后，才能继续执行下面的代码。await通过返回一个Promise对象来实现同步的效果。

### 3. 对Promise的理解 ###

Promise是异步编程的一种解决方案，它是一个对象，可以获取异步操作的消息，他的出现大大改善了异步编程的困境，避免了地狱回调，它比传统的解决方案回调函数和事件更合理和更强大。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。  
（1）Promise的实例有**三个状态**:

*  Pending（进行中）
 *  Resolved（已完成）
 *  Rejected（已拒绝）

当把一件事情交给promise时，它的状态就是Pending，任务完成了状态就变成了Resolved、没有完成失败了就变成了Rejected。  
（2）Promise的实例有**两个过程**：

*  pending -> fulfilled : Resolved（已完成）
 *  pending -> rejected：Rejected（已拒绝）

需要注意：一旦从进行状态变成为其他状态就永远不能更改状态了。

**Promise的特点：**

*  对象的状态不受外界影响。promise对象代表一个异步操作，有三种状态，`pending`（进行中）、`fulfilled`（已成功）、`rejected`（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态，这也是promise这个名字的由来——“**承诺**”；
 *  一旦状态改变就不会再变，任何时候都可以得到这个结果。promise对象的状态改变，只有两种可能：从`pending`变为`fulfilled`，从`pending`变为`rejected`。这时就称为`resolved`（已定型）。如果改变已经发生了，你再对promise对象添加回调函数，也会立即得到这个结果。这与事件（event）完全不同，事件的特点是：如果你错过了它，再去监听是得不到结果的。

**Promise的缺点：**

*  无法取消Promise，一旦新建它就会立即执行，无法中途取消。
 *  如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
 *  当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

**总结：**  
Promise 对象是异步编程的一种解决方案，最早由社区提出。Promise 是一个构造函数，接收一个函数作为参数，返回一个 Promise 实例。一个 Promise 实例有三种状态，分别是pending、resolved 和 rejected，分别代表了进行中、已成功和已失败。实例的状态只能由 pending 转变 resolved 或者rejected 状态，并且状态一经改变，就凝固了，无法再被改变了。

状态的改变是通过 resolve() 和 reject() 函数来实现的，可以在异步操作结束后调用这两个函数改变 Promise 实例的状态，它的原型上定义了一个 then 方法，使用这个 then 方法可以为两个状态的改变注册回调函数。这个回调函数属于微任务，会在本轮事件循环的末尾执行。

### 4. Promise的基本用法 ###

#### （1）创建Promise对象 ####

Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是`resolve`和`reject`。

const promise = new Promise(function(resolve, reject) { 
      // ... some code
      if (/* 异步操作成功 */){ 
        resolve(value);
      } else { 
        reject(error);
      }
    });

**一般情况下都会使用`new Promise()`来创建promise对象，但是也可以使用`promise.resolve`和 `promise.reject`这两个方法：**

*  **Promise.resolve**

`Promise.resolve(value)`的返回值也是一个promise对象，可以对返回值进行.then调用；

如下代码：

Promise.resolve(11).then(function(value){ 
      console.log(value); // 打印出11
    });

`resolve(11)`代码中，会让promise对象进入确定(`resolve`状态)，并将参数`11`传递给后面的`then`所指定的`onFulfilled` 函数；

上面说过创建promise对象，可以使用`new Promise`的形式创建对象，但是这边也可以使用`Promise.resolve(value)`的形式创建promise对象；

*  **Promise.reject**

`Promise.reject` 也是`new Promise`的快捷形式，也创建一个promise对象。

如下代码：

Promise.reject(new Error(“我错了，请原谅俺！！”));

就是下面的代码new Promise的简单形式：

new Promise(function(resolve,reject){ 
       reject(new Error("我错了，请原谅俺！！"));
    });

下面来综合看看使用resolve方法和reject方法：

上面的代码的含义是给`testPromise`方法传递一个参数，返回一个promise对象，如果为`true`的话，那么调用promise对象中的`resolve()`方法，并且把其中的参数传递给后面的`then`第一个函数内，因此打印出 “`hello world`”, 如果为`false`的话，会调用promise对象中的`reject()`方法，则会进入`then`的第二个函数内，会打印`No thanks`；

#### （2）Promise方法 ####

Promise有五个常用的方法：then()、catch()、all()、race()、finally。下面就来看一下这些方法。

1.  **then()**

当Promise执行的内容符合成功条件时，调用`resolve`函数，失败就调用`reject`函数。Promise创建完了，那该如何调用呢？

promise.then(function(value) {
      // success
    }, function(error) {
      // failure
    });

`then`方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为`resolved`时调用，第二个回调函数是Promise对象的状态变为`rejected`时调用。其中第二个参数可以省略。  
`then`方法返回的是一个新的Promise实例（不是原来那个Promise实例）。因此可以采用链式写法，即`then`方法后面再调用另一个then方法。

当要写有顺序的异步事件时，需要串行时，可以这样写：

let promise = new Promise((resolve,reject)=>{ 
        ajax('first').success(function(res){ 
            resolve(res);
        })
    })
    promise.then(res=>{ 
        return new Promise((resovle,reject)=>{ 
            ajax('second').success(function(res){ 
                resolve(res)
            })
        })
    }).then(res=>{ 
        return new Promise((resovle,reject)=>{ 
            ajax('second').success(function(res){ 
                resolve(res)
            })
        })
    }).then(res=>{ 
        
    })

那当要写的事件没有顺序或者关系时，还如何写呢？可以使用`all` 方法来解决。  
**2. catch()**

*  Promise对象除了有then方法，还有一个catch方法，该方法相当于`then`方法的第二个参数，指向`reject`的回调函数。
 *  不过`catch`方法还有一个作用，就是在执行`resolve`回调函数时，如果出现错误，抛出异常，不会停止运行，而是进入`catch`方法中。

p.then((data) => { 
         console.log('resolved',data);
    },(err) => { 
         console.log('rejected',err);
         }
    ); 
    p.then((data) => { 
        console.log('resolved',data);
    }).catch((err) => { 
        console.log('rejected',err);
    });

**3. all()**  
`all`方法可以完成并行任务， 它接收一个数组，数组的每一项都是一个`promise`对象。当数组中所有的`promise`的状态都达到`resolved`的时候，`all`方法的状态就会变成`resolved`，如果有一个状态变成了`rejected`，那么`all`方法的状态就会变成`rejected`。

javascript
    let promise1 = new Promise((resolve,reject)=>{ 
    	setTimeout(()=>{ 
           resolve(1);
    	},2000)
    });
    let promise2 = new Promise((resolve,reject)=>{ 
    	setTimeout(()=>{ 
           resolve(2);
    	},1000)
    });
    let promise3 = new Promise((resolve,reject)=>{ 
    	setTimeout(()=>{ 
           resolve(3);
    	},3000)
    });
    Promise.all([promise1,promise2,promise3]).then(res=>{ 
        console.log(res);
        //结果为：[1,2,3] 
    })

调用`all`方法时的结果成功的时候是回调函数的参数也是一个数组，这个数组按顺序保存着每一个promise对象`resolve`执行时的值。  
**（4）race()**  
`race`方法和`all`一样，接受的参数是一个每项都是`promise`的数组，但是与`all`不同的是，当最先执行完的事件执行完之后，就直接返回该`promise`对象的值。

如果第一个`promise`对象状态变成`resolved`，那自身的状态变成了`resolved`；反之第一个`promise`变成`rejected`，那自身状态就会变成`rejected`。

那么`race`方法有什么实际作用呢？当要做一件事，超过多长时间就不做了，可以用这个方法来解决：

Promise.race([promise1,timeOutPromise(5000)]).then(res=>{ })

**5. finally()**  
`finally`方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。

promise
    .then(result => { ···})
    .catch(error => { ···})
    .finally(() => { ···});

上面代码中，不管`promise`最后的状态，在执行完`then`或`catch`指定的回调函数以后，都会执行`finally`方法指定的回调函数。

下面是一个例子，服务器使用 Promise 处理请求，然后使用`finally`方法关掉服务器。

server.listen(port)
      .then(function () { 
        // ...
      })
      .finally(server.stop);

`finally`方法的回调函数不接受任何参数，这意味着没有办法知道，前面的 Promise 状态到底是`fulfilled`还是`rejected`。这表明，`finally`方法里面的操作，应该是与状态无关的，不依赖于 Promise 的执行结果。

`finally`本质上是`then`方法的特例：

promise
    .finally(() => { 
      // 语句
    });
    // 等同于
    promise
    .then(
      result => { 
        // 语句
        return result;
      },
      error => { 
        // 语句
        throw error;
      }
    );

上面代码中，如果不使用`finally`方法，同样的语句需要为成功和失败两种情况各写一次。有了`finally`方法，则只需要写一次。

### 5. Promise解决了什么问题 ###

在工作中经常会碰到这样一个需求，比如我使用ajax发一个A请求后，成功后拿到数据，需要把数据传给B请求；那么需要如下编写代码：

let fs = require('fs')
    fs.readFile('./a.txt','utf8',function(err,data){ 
      fs.readFile(data,'utf8',function(err,data){ 
        fs.readFile(data,'utf8',function(err,data){ 
          console.log(data)
        })
      })
    })

如上代码；上面的代码有如下缺点：

*  后一个请求需要依赖于前一个请求成功后，将数据往下传递，会导致多个ajax请求嵌套的情况，代码不够直观。
 *  如果前后两个请求不需要传递参数的情况下，那么后一个请求也需要前一个请求成功后再执行下一步操作，这种情况下，那么也需要如上编写代码，导致代码不够直观。

`Promise`出现之后，代码变成了这样子：

let fs = require('fs')
    function read(url){ 
      return new Promise((resolve,reject)=>{ 
        fs.readFile(url,'utf8',function(error,data){ 
          error && reject(error)
          resolve(data)
        })
      })
    }
    read('./a.txt').then(data=>{ 
      return read(data) 
    }).then(data=>{ 
      return read(data)  
    }).then(data=>{ 
      console.log(data)
    })

这样代码看起了就简洁了很多，解决了地狱回调的问题。

### 6. Promise.all和Promise.race的区别的使用场景 ###

**（1）Promise.all**  
`Promise.all`可以将多个`Promise`实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是**一个结果数组**，而失败的时候则返回**最先被reject失败状态的值**。

Promise.all中传入的是数组，返回的也是是数组，并且会将进行映射，传入的promise对象返回的值是按照顺序在数组中排列的，但是注意的是他们执行的顺序并不是按照顺序的，除非可迭代对象为空。

需要特别注意的是，Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，这样当遇到发送多个请求并根据请求顺序获取和使用数据的场景，就可以使用Promise.all来解决。  
**（2）Promise.race**  
顾名思义，Promse.race就是赛跑的意思，意思就是说，Promise.race(\[p1, p2, p3\])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

当要做一件事，超过多长时间就不做了，可以用这个方法来解决：

Promise.race([promise1,timeOutPromise(5000)]).then(res=>{ })

### 7. 对async/await 的理解 ###

async/await其实是`Generator` 的语法糖，它能实现的效果都能用then链来实现，它是为优化then链而开发出来的。从字面上来看，async是“异步”的简写，await则为等待，所以很好理解async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。当然语法上强制规定await只能出现在asnyc函数中，先来看看async函数返回了什么：

async function testAsy(){ 
       return 'hello world';
    }
    let result = testAsy(); 
    console.log(result)

![在这里插入图片描述][20210308230508434.png]

所以，async 函数返回的是一个 Promise 对象。async 函数（包含函数语句、函数表达式、Lambda表达式）会返回一个 Promise 对象，如果在函数中 `return` 一个直接量，async 会把这个直接量通过 `Promise.resolve()` 封装成 Promise 对象。

async 函数返回的是一个 Promise 对象，所以在最外层不能用 await 获取其返回值的情况下，当然应该用原来的方式：`then()` 链来处理这个 Promise 对象，就像这样：

async function testAsy(){ 
       return 'hello world'
    }
    let result = testAsy() 
    console.log(result)
    result.then(v=>{ 
        console.log(v)   // hello world
    })

现在回过头来想下，如果 async 函数没有返回值，又该如何？很容易想到，它会返回 `Promise.resolve(undefined)`。  
联想一下 Promise 的特点——无等待，所以在没有 `await` 的情况下执行 async 函数，它会立即执行，返回一个 Promise 对象，并且，绝不会阻塞后面的语句。这和普通返回 Promise 对象的函数并无二致。

**注意：**  
`Promise.resolve(x)` 可以看作是 `new Promise(resolve => resolve(x))` 的简写，可以用于快速封装字面量对象或其他对象，将其封装成 Promise 实例。

### 8. await 到底在等啥？ ###

**重点就在await，它等待什么呢？**

一般来说，都认为 await 是在等待一个 async 函数完成。不过按语法说明，await 等待的是一个表达式，这个表达式的计算结果是 Promise 对象或者其它值（换句话说，就是没有特殊限定）。

因为 async 函数返回一个 Promise 对象，所以 await 可以用于等待一个 async 函数的返回值——这也可以说是 await 在等 async 函数，但要清楚，它等的实际是一个返回值。注意到 await 不仅仅用于等 Promise 对象，它可以等任意表达式的结果，所以，await 后面实际是可以接普通函数调用或者直接量的。所以下面这个示例完全可以正确运行：

await 表达式的运算结果取决于它等的是什么。

*  如果它等到的不是一个 Promise 对象，那 await 表达式的运算结果就是它等到的东西。
 *  如果它等到的是一个 Promise 对象，await 就忙起来了，它会阻塞后面的代码，等着 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果。

来看一个例子：

这就是 await 必须用在 async 函数中的原因。async 函数调用不会造成阻塞，它内部所有的阻塞都被封装在一个 Promise 对象中异步执行。await暂停当前async的执行，所以’cug’'最先输出，hello world’和‘cuger’是3秒钟后同时出现的。

### 9. async/await的优势 ###

单一的 Promise 链并不能发现 async/await 的优势，但是，如果需要处理由多个 Promise 组成的 then 链的时候，优势就能体现出来了（很有意思，Promise 通过 then 链来解决多层回调的问题，现在又用 async/await 来进一步优化它）。

假设一个业务，分多个步骤完成，每个步骤都是异步的，而且依赖于上一个步骤的结果。仍然用 `setTimeout` 来模拟异步操作：

/** * 传入参数 n，表示这个函数执行的时间（毫秒） * 执行的结果是 n + 200，这个值将用于下一步骤 */
    function takeLongTime(n) { 
        return new Promise(resolve => { 
            setTimeout(() => resolve(n + 200), n);
        });
    }
    function step1(n) { 
        console.log(`step1 with ${ n}`);
        return takeLongTime(n);
    }
    function step2(n) { 
        console.log(`step2 with ${ n}`);
        return takeLongTime(n);
    }
    function step3(n) { 
        console.log(`step3 with ${ n}`);
        return takeLongTime(n);
    }

现在用 Promise 方式来实现这三个步骤的处理

输出结果 `result` 是 `step3()` 的参数 `700 + 200` = `900`。`doIt()` 顺序执行了三个步骤，一共用了 `300 + 500 + 700 = 1500` 毫秒，和 `console.time()/console.timeEnd()` 计算的结果一致。

如果用 async/await 来实现呢，会是这样：

async function doIt() { 
        console.time("doIt");
        const time1 = 300;
        const time2 = await step1(time1);
        const time3 = await step2(time2);
        const result = await step3(time3);
        console.log(`result is ${ result}`);
        console.timeEnd("doIt");
    }
    doIt();

结果和之前的 Promise 实现是一样的，但是这个代码看起来是不是清晰得多，几乎跟同步代码一样

### 10. async/await对比Promise的优势 ###

*  代码读起来更加同步，Promise虽然摆脱了回调地狱，但是then的链式调⽤也会带来额外的阅读负担
 *  Promise传递中间值⾮常麻烦，⽽async/await⼏乎是同步的写法，⾮常优雅
 *  错误处理友好，async/await可以⽤成熟的try/catch，Promise的错误捕获⾮常冗余
 *  调试友好，Promise的调试很差，由于没有代码块，你不能在⼀个返回表达式的箭头函数中设置断点，如果你在⼀个.then代码块中使⽤调试器的步进(step-over)功能，调试器并不会进⼊后续的.then代码块，因为调试器只能跟踪同步代码的每⼀步。

### 11. async/await 如何捕获异常 ###

async function fn(){ 
        try{ 
            let a = await Promise.reject('error')
        }catch(error){ 
            console.log(error)
        }
    }

## 二、异步代码输出 ##

### 一、Promise基础 ###

#### 1、下面代码的执行结果是 ####

const promise = new Promise((resolve, reject) => { 
      console.log(1);
      console.log(2);
    });
    promise.then(() => { 
      console.log(3);
    });
    console.log(4);

最后应该输出1 2 4。这样最主要的就是3，要知道promise.then是微任务，会在所有的宏任务执行完之后才会执行，同时需要promise内部的状态发生变化，因为这里内部没有发生变化，所以不输出3。

#### 2、下面代码的执行结果是 ####

const promise1 = new Promise((resolve, reject) => { 
      console.log('promise1')
      resolve('resolve1')
    })
    const promise2 = promise1.then(res => { 
      console.log(res)
    })
    console.log('1', promise1);
    console.log('2', promise2);

输出结果如下：

'promise1'
    '1' Promise{ <resolved>: 'resolve1'}
    '2' Promise{ <pending>}
    'resolve1'

需要注意的是，直接打印promise1，会打印出它的状态值和参数。

这里说一下这道题的具体思路：

*  script是一个宏任务，按照顺序执行这些代码
 *  首先进入Promise，执行该构造函数中的代码，打印`promise1`
 *  碰到`resolve`函数, 将`promise1`的状态改变为`resolved`, 并将结果保存下来
 *  碰到`promise1.then`这个微任务，将它放入微任务队列
 *  `promise2`是一个新的状态为`pending`的`Promise`
 *  执行同步代码1， 同时打印出`promise1`的状态是`resolved`
 *  执行同步代码2，同时打印出`promise2`的状态是`pending`
 *  宏任务执行完毕，查找微任务队列，发现`promise1.then`这个微任务且状态为`resolved`，执行它。

这样，就执行完了所有的的代码。

#### 3、下面代码的执行结果是 ####

执行顺序：

*  首先遇到Promise构造函数，会先执行里面的内容，打印1
 *  遇到`steTimeout`，它是一个宏任务，被推入宏任务队列
 *  接下继续执行，打印出2
 *  由于`Promise`的状态此时还是`pending`，所以`promise.then`先不执行
 *  继续执行下面的同步任务，打印出4
 *  微任务队列此时没有任务，继续执行下一轮宏任务，执行`steTimeout`
 *  首先执行`timerStart`，然后遇到了`resolve`，将`promise`的状态改为`resolved`且保存结果并将之前的`promise.then`推入微任务队列，再执行`timerEnd`
 *  执行完这个宏任务，就去执行微任务`promise.then`，打印出`resolve`的结果

#### 4、下面代码的执行结果是 ####

Promise.resolve().then(() => { 
      console.log('promise1');
      const timer2 = setTimeout(() => { 
        console.log('timer2')
      }, 0)
    });
    const timer1 = setTimeout(() => { 
      console.log('timer1')
      Promise.resolve().then(() => { 
        console.log('promise2')
      })
    }, 0)
    console.log('start');

这个题目就有点绕了，下面来梳理一下：

*  首先，`Promise.resolve().then`是一个微任务，加入微任务队列
 *  执行timer1，它是一个宏任务，加入宏任务队列
 *  继续执行下面的同步代码，打印出start
 *  这样第一轮的宏任务就执行完了，开始执行微任务，打印出`promise1`
 *  遇到timer2，它是一个宏任务，将其加入宏任务队列
 *  这样第一轮的微任务就执行完了，开始执行第二轮宏任务，指执行定时器timer1,打印timer1
 *  遇到Promise，它是一个微任务，加入微任务队列
 *  开始执行微任务队列中的任务，打印promise2
 *  最后执行宏任务timer2定时器，打印出timer2

这个题目还是比较复杂的，值得去认真理解一下。

执行结果：

'start'
    'promise1'
    'timer1'
    'promise2'
    'timer2'

#### 5、下面代码的执行结果是 ####

执行结果为：`then：success1`

这个题目考察的就是`Promise`的状态在发生变化之后，就不会再发生变化。开始状态由`pending`变为`resolve`，说明已经变为已完成状态，下面的两个状态的就不会再执行，同时下面的catch也不会捕获到错误。

#### 6、下面代码的执行结果是 ####

Promise.resolve(1)
      .then(2)
      .then(Promise.resolve(3))
      .then(console.log)

执行结果为：

1
    Promise { <fulfilled>: undefined}

Promise.resolve方法的参数如果是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的Promise对象，状态为resolved，Promise.resolve方法的参数，会同时传给回调函数。

then方法接受的参数是函数，而如果传递的并非是一个函数，它实际上会将其解释为then(null)，这就会导致前一个Promise的结果会传递下面。

#### 7、下面代码的执行结果是 ####

const promise1 = new Promise((resolve, reject) => { 
      setTimeout(() => { 
        resolve('success')
      }, 1000)
    })
    const promise2 = promise1.then(() => { 
      throw new Error('error!!!')
    })
    console.log('promise1', promise1)
    console.log('promise2', promise2)
    setTimeout(() => { 
      console.log('promise1', promise1)
      console.log('promise2', promise2)
    }, 2000)

输出的结果如下：

promise1 Promise { <pending>}
    promise2 Promise { <pending>}
    
    Uncaught (in promise) Error: error!!!
    promise1 Promise { <fulfilled>: "success"}
    promise2 Promise { <rejected>: Error: error!!}

这个就比较好理解了，和上面的几个题目思路类似。

### 二、Promise的catch、then、finally ###

#### 8、下面代码的执行结果是 ####

Promise.resolve(1)
      .then(res => { 
        console.log(res);
        return 2;
      })
      .catch(err => { 
        return 3;
      })
      .then(res => { 
        console.log(res);
      });

输出结果为：1 2

Promise可以链式调用，因为每次调用 `.then` 或者 `.catch` 都会返回一个新的 promise，从而实现了链式调用, 它并不像一般任务的链式调用一样return this。

上面的输出结果之所以依次打印出1和2，是因为`resolve(1)`之后走的是第一个then方法，并没有走catch里，所以第二个then中的res得到的实际上是第一个then的返回值。并且return 2会被包装成`resolve(2)`，被最后的then打印输出2。

#### 9、下面代码的执行结果是 ####

Promise.resolve().then(() => { 
      return new Error('error!!!')
    }).then(res => { 
      console.log("then: ", res)
    }).catch(err => { 
      console.log("catch: ", err)
    })

返回任意一个非 promise 的值都会被包裹成 promise 对象，因此这里的`return new Error('error!!!')`也被包裹成了`return Promise.resolve(new Error('error!!!'))`。

因此它被then捕获而不是catch，输出结果为：

"then: " "Error: error!!!"

**10、下面代码的执行结果是**

const promise = Promise.resolve().then(() => { 
      return promise;
    })
    promise.catch(console.err)

这里其实是一个坑，`.then` 或 `.catch` 返回的值不能是 promise 本身，否则会造成死循环。所以这道题会报错：

Uncaught (in promise) TypeError: Chaining cycle detected for promise #<Promise>

#### 11、下面代码的执行结果是 ####

Promise.resolve(1)
      .then(2)
      .then(Promise.resolve(3))
      .then(console.log)

看到这个题目，好多的then，实际上只需要记住一个原则：`.then` 或`.catch` 的参数期望是函数，传入非函数则会发生**值透传**。

第一个then和第二个then中传入的都不是函数，一个是数字，一个是对象，因此发生了透传，将`resolve(1)` 的值直接传到最后一个then里。

所以输出结果为：1

#### 12、下面代码的执行结果是 ####

Promise.reject('err!!!')
      .then((res) => { 
        console.log('success', res)
      }, (err) => { 
        console.log('error', err)
      }).catch(err => { 
        console.log('catch', err)
      })

`.then`函数中的两个参数：

*  第一个参数是用来处理Promise成功的函数
 *  第二个则是处理失败的函数

也就是说`Promise.resolve('1')`的值会进入成功的函数，`Promise.reject('2')`的值会进入失败的函数。

在这道题中，错误直接被`then`的第二个参数捕获了，所以就不会被`catch`捕获了，输出结果为：`'error' 'error!!!'`

但是，如果是像下面这样：

Promise.resolve()
      .then(function success (res) { 
        throw new Error('error!!!')
      }, function fail1 (err) { 
        console.log('fail1', err)
      }).catch(function fail2 (err) { 
        console.log('fail2', err)
      })

在`then`的第一参数中抛出了错误，那么他就不会被第二个参数不活了，而是被后面的`catch`捕获到，所以输出结果为：

fail2 Error: error!!!
                  at success

#### 13、下面代码的执行结果是 ####

Promise.resolve('1')
      .then(res => { 
        console.log(res)
      })
      .finally(() => { 
        console.log('finally')
      })
    Promise.resolve('2')
      .finally(() => { 
        console.log('finally2')
      	return '我是finally2返回的值'
      })
      .then(res => { 
        console.log('finally2后面的then函数', res)
      })

`.finally()`一般用的很少，只要记住以下几点就可以了：

*  `.finally()`方法不管Promise对象最后的状态如何都会执行
 *  `.finally()`方法的回调函数不接受任何的参数，也就是说你在`.finally()`函数中是无法知道Promise最终的状态是`resolved`还是`rejected`的
 *  它最终返回的默认会是一个上一次的Promise对象值，不过如果抛出的是一个异常则返回异常的Promise对象。
 *  finally本质上是then方法的特例

上面的代码的输出结果为：

1
    finally2
    finally
    finally2后面的then函数 2

再开看一下`.finally()`的错误捕获：

Promise.resolve('1')
      .finally(() => { 
        console.log('finally1')
        throw new Error('我是finally中抛出的异常')
      })
      .then(res => { 
        console.log('finally后面的then函数', res)
      })
      .catch(err => { 
        console.log('捕获错误', err)
      })

输出结果为：

'finally1'
    '捕获错误' Error: 我是finally中抛出的异常

### 三、Promise的all和race ###

*  `.all()`的作用是接收一组异步任务，然后并行执行异步任务，并且在所有异步操作执行完后才执行回调。
 *  `.race()`的作用是接收一组异步任务，然后并行执行异步任务，只保留取第一个执行完成的异步操作的结果，其他的方法仍在执行，不过执行结果会被抛弃。

**14、下面代码的执行结果是**

function runAsync (x) { 
        const p = new Promise(r => setTimeout(() => r(x, console.log(x)), 1000))
        return p
    }
    
    Promise.all([runAsync(1), runAsync(2), runAsync(3)]).then(res => console.log(res))

首先，定义了一个Promise，来异步执行函数runAsync，该函数传入一个值x，然后间隔一秒后打印出这个x。

之后再使用`Promise.all`来执行这个函数，结果如下：

1
    2
    3
    [1, 2, 3]

执行的时候，看到一秒之后输出了1，2，3，同时输出了数组\[1, 2, 3\]，三个函数是同步执行的，并且在一个回调函数中返回了所有的结果。并且结果和函数的执行顺序是一致的。

#### 15、下面代码的执行结果是 ####

function runAsync (x) { 
      const p = new Promise(r => setTimeout(() => r(x, console.log(x)), 1000))
      return p
    }
    function runReject (x) { 
      const p = new Promise((res, rej) => setTimeout(() => rej(`Error: ${ x}`, console.log(x)), 1000 * x))
      return p
    }
    Promise.all([runAsync(1), runReject(4), runAsync(3), runReject(2)])
           .then(res => console.log(res))
           .catch(err => console.log(err))

输出结果：

// 1s后输出
    1
    3
    // 2s后输出
    2
    Error: 2
    // 4s后输出
    4

可以看到。catch捕获到了第一个错误，在这道题目中最先的错误就是`runReject(2)`的结果。

如果一组异步操作中有一个异常都不会进入`.then()`的第一个回调函数参数中。会被`.then()`的第二个回调函数捕获。

#### 16、下面代码的执行结果是 ####

下面再来看一下race：

function runAsync (x) { 
      const p = new Promise(r => setTimeout(() => r(x, console.log(x)), 1000))
      return p
    }
    Promise.race([runAsync(1), runAsync(2), runAsync(3)])
      .then(res => console.log('result: ', res))
      .catch(err => console.log(err))

执行结果：

1
    'result: ' 1
    2
    3

then只会捕获第一个成功的方法，其他的函数虽然还会继续执行，但是不是被then捕获了。

#### 17、下面代码的执行结果是 ####

输出结果为：

0
    Error: 0
    1
    2
    3

可以看到在catch捕获到第一个错误之后，后面的代码还不执行，不过不会再被捕获了。

注意：`all`和`race`传入的数组中如果有会抛出异常的异步任务，那么只有最先抛出的错误会被捕获，并且是被then的第二个参数或者后面的catch捕获；但并不会影响数组中其它的异步任务的执行。

### 四、Async、await ###

说到Promise就不得不提以下async和await，他们同样是用来执行异步代码。

#### 18、下面代码的执行结果是 ####

async function async1() { 
      console.log("async1 start");
      await async2();
      console.log("async1 end");
    }
    async function async2() { 
      console.log("async2");
    }
    async1();
    console.log('start')

输出结果为：

async1 start
    async2
    start
    async1 end

执行顺序：

*  首先执行函数中的同步代码`async1 start`，之后碰到了`await`，它会阻塞`async1`后面代码的执行，因此会先去执行`async2`中的同步代码`async2`，然后跳出`async1`
 *  跳出`async1`函数后，执行同步代码`start`
 *  在一轮宏任务全部执行完之后，再来执行`await`后面的内容`async1 end`

这里可以理解为await后面的语句相当于放到了new Promise中，下一行及之后的语句相当于放在Promise.then中。

#### 19、下面代码的执行结果是 ####

async function async1() { 
      console.log("async1 start");
      await async2();
      console.log("async1 end");
      setTimeout(() => { 
        console.log('timer1')
      }, 0)
    }
    async function async2() { 
      setTimeout(() => { 
        console.log('timer2')
      }, 0)
      console.log("async2");
    }
    async1();
    setTimeout(() => { 
      console.log('timer3')
    }, 0)
    console.log("start")

输出结果为：

async1 start
    async2
    start
    async1 end
    timer2
    timer3
    timer1

这个题目就稍微就有点麻烦了。看一下执行的步骤：

*  首先进入`async1`，打印出`async1 start`，这个是毋庸置疑的
 *  之后遇到`async2`，进入`async2`，遇到定时器`timer2`，加入宏任务队列，之后打印`async2`
 *  由于`async2`阻塞了后面代码的执行，所以执行后面的定时器`timer3`，将其加入宏任务队列，之后打印`start`
 *  然后执行async2后面的代码，打印出`async1 end`，遇到定时器timer1，将其加入宏任务队列
 *  最后，宏任务队列有三个任务，先后顺序为`timer2`，`timer3`，`timer1`，没有微任务，所以直接所有的宏任务按照先进先出的原则执行。

实际上也不是很难，只要理清事件循环机制，就很容易做出来啦！

#### 20、下面代码的执行结果是 ####

async function async1 () { 
      console.log('async1 start');
      await new Promise(resolve => { 
        console.log('promise1')
      })
      console.log('async1 success');
      return 'async1 end'
    }
    console.log('srcipt start')
    async1().then(res => console.log(res))
    console.log('srcipt end')

输出结果：

script start
    async1 start
    promise1
    script end

这里需要注意的是在`async1`中`await`后面的Promise是没有返回值的，也就是它的状态始终是`pending`状态，所以在`await`之后的内容是不会执行的，也包括`async1`后面的 `.then`。

#### 21、下面代码的执行结果是 ####

async function async1 () { 
      console.log('async1 start');
      await new Promise(resolve => { 
        console.log('promise1')
        resolve('promise1 resolve')
      }).then(res => console.log(res))
      console.log('async1 success');
      return 'async1 end'
    }
    console.log('srcipt start')
    async1().then(res => console.log(res))
    console.log('srcipt end')

这里对上面一题进行了改造，加上了resolve，来看看输出结果：

script start
    async1 start
    promise1
    script end
    promise1 resolve
    async1 success
    async1 end

这个就不难理解了，不多解释。

#### 22、下面代码的执行结果是 ####

来看一道字节跳动面试题：

async function async1() { 
      console.log("async1 start");
      await async2();
      console.log("async1 end");
    }
    
    async function async2() { 
      console.log("async2");
    }
    
    console.log("script start");
    
    setTimeout(function() { 
      console.log("setTimeout");
    }, 0);
    
    async1();
    
    new Promise(function(resolve) { 
      console.log("promise1");
      resolve();
    }).then(function() { 
      console.log("promise2");
    });
    console.log('script end')

script start
    async1 start
    async2
    promise1
    script end
    async1 end
    promise2
    setTimeout

也不多解释了，只是流程比较长，实际上难度并不是很大。

#### 23、下面代码的执行结果是 ####

async function async1 () { 
      await async2();
      console.log('async1');
      return 'async1 success'
    }
    async function async2 () { 
      return new Promise((resolve, reject) => { 
        console.log('async2')
        reject('error')
      })
    }
    async1().then(res => console.log(res))

输出结果为：

async2
    Uncaught (in promise) error

可以看到，如果async函数中抛出了错误，就会终止错误结果，不会继续向下执行。

如果想要让错误不足之处后面的代码执行，可以使用catch来捕获：

async function async1 () { 
      await Promise.reject('error!!!').catch(e => console.log(e))
      console.log('async1');
      return Promise.resolve('async1 success')
    }
    async1().then(res => console.log(res))
    console.log('script start')

这样的输出结果就是：

script start
    error!!!
    async1
    async1 success

### 五、综合题目 ###

#### 24、下面代码的执行结果是 ####

这是一道比较综合的题目，看一下执行结果：

3
    7
    4
    1
    2
    5
    Promise{ <resolved>: 1}

说一下执行的步骤吧：

*  首先会进入Promise，打印出3，之后进入下面的Promise，打印出7
 *  遇到了定时器，将其加入宏任务队列
 *  执行Promise p中的resolve，状态变为resolved，返回值为1
 *  执行Promise first中的resolve，状态变为resolved，返回值为2
 *  遇到p.then，将其加入微任务队列，遇到first().then，将其加入任务队列
 *  执行外面的代码，打印出4
 *  这样第一轮宏任务就执行完了，开始执行微任务队列中的任务，先后打印出1和2
 *  这样微任务就执行完了，开始执行下一轮宏任务，宏任务队列中有一个定时器，执行它，打印出5，由于执行已经变为resolved状态，所以`resolve(6)`不会再执行
 *  最后`console.log(p)`打印出`Promise{<resolved>: 1}`

#### 25、下面代码的执行结果是 ####

输出结果为：

script start
    async1
    promise1
    script end
    1
    timer2
    timer1

这道题比较简单，简单说一下执行的过程：

*  首先执行同步带吗，打印出script start
 *  遇到定时器timer1将其加入宏任务队列
 *  之后是执行Promise，打印出promise1，由于Promise没有返回值，所以后面的代码不会执行
 *  然后执行同步代码，打印出script end
 *  继续执行下面的Promise，.then和.catch期望参数是一个函数，这里传入的是一个数字，因此就会发生值渗透，将resolve(1)的值传到最后一个then，直接打印出1
 *  遇到第二个定时器，将其加入到微任务队列，执行微任务队列，按顺序依次执行两个定时器，但是由于定时器时间的原因，会在两秒后先打印出timer2，在四秒后打印出timer1

#### 26、下面代码的执行结果是 ####

执行结果为：

resolve1
    finally  undefined
    timer1
    Promise{ <resolved>: undefined}

需要注意的是最后一个定时器打印出的p1其实是`.finally`的返回值，我们知道`.finally`的返回值如果在没有抛出错误的情况下默认会是上一个Promise的返回值，而这道题中`.finally`上一个Promise是`.then()`，但是这个`.then()`并没有返回值，所以p1打印出来的Promise的值会是`undefined`，如果在定时器的下面加上一个`return 1`，则值就会变成1。

#### 27、下面代码的执行结果是 ####

console.log('1');
    
    setTimeout(function() { 
        console.log('2');
        process.nextTick(function() { 
            console.log('3');
        })
        new Promise(function(resolve) { 
            console.log('4');
            resolve();
        }).then(function() { 
            console.log('5')
        })
    })
    process.nextTick(function() { 
        console.log('6');
    })
    new Promise(function(resolve) { 
        console.log('7');
        resolve();
    }).then(function() { 
        console.log('8')
    })
    
    setTimeout(function() { 
        console.log('9');
        process.nextTick(function() { 
            console.log('10');
        })
        new Promise(function(resolve) { 
            console.log('11');
            resolve();
        }).then(function() { 
            console.log('12')
        })
    })

这是秋招遇到的一个笔试题，流程比较复杂，下面来分析一下：  
**（1）第一轮事件循环流程分析如下：**

*  整体script作为第一个宏任务进入主线程，遇到`console.log`，输出1。
 *  遇到`setTimeout`，其回调函数被分发到宏任务Event Queue中。暂且记为`setTimeout1`。
 *  遇到`process.nextTick()`，其回调函数被分发到微任务Event Queue中。记为`process1`。
 *  遇到`Promise`，`new Promise`直接执行，输出7。`then`被分发到微任务Event Queue中。记为`then1`。
 *  又遇到了`setTimeout`，其回调函数被分发到宏任务Event Queue中，记为`setTimeout2`。

<table> 
 <thead> 
  <tr> 
   <th>宏任务Event Queue</th> 
   <th>微任务Event Queue</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>setTimeout1</td> 
   <td>process1</td> 
  </tr> 
  <tr> 
   <td>setTimeout2</td> 
   <td>then1</td> 
  </tr> 
 </tbody> 
</table>

上表是第一轮事件循环宏任务结束时各Event Queue的情况，此时已经输出了1和7。发现了`process1`和`then1`两个微任务：

*  执行`process1`，输出6。
 *  执行`then1`，输出8。

好了，第一轮事件循环正式结束，这一轮的结果是输出1，7，6，8。

**（2）第二轮时间循环从`setTimeout1`宏任务开始：**

第二轮事件循环宏任务结束，发现有`process2`和`then2`两个微任务可以执行：

*  输出3。
 *  输出5。

第二轮事件循环结束，第二轮输出2，4，3，5。

**（3）第三轮事件循环开始，此时只剩setTimeout2了，执行。**

*  直接输出9。
 *  将`process.nextTick()`分发到微任务Event Queue中。记为`process3`。
 *  直接执行`new Promise`，输出11。
 *  将`then`分发到微任务Event Queue中，记为`then3`。

<table> 
 <thead> 
  <tr> 
   <th>宏任务Event Queue</th> 
   <th>微任务Event Queue</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td></td> 
   <td>process3</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>then3</td> 
  </tr> 
 </tbody> 
</table>

第三轮事件循环宏任务执行结束，执行两个微任务`process3`和`then3`：

*  输出10。
 *  输出12。

第三轮事件循环结束，第三轮输出9，11，10，12。

整段代码，共进行了三次事件循环，完整的输出为1，7，6，8，2，4，3，5，9，11，10，12。

## 三、面向对象 ##

### 1. 对象创建的方式有哪些？ ###

一般使用字面量的形式直接创建对象，但是这种创建方式对于创建大量相似对象的时候，会产生大量的重复代码。但 js和一般的面向对象的语言不同，在 ES6 之前它没有类的概念。但是可以使用函数来进行模拟，从而产生出可复用的对象创建方式，常见的有以下几种：

（1）第一种是工厂模式，工厂模式的主要工作原理是用函数来封装创建对象的细节，从而通过调用函数来达到复用的目的。但是它有一个很大的问题就是创建出来的对象无法和某个类型联系起来，它只是简单的封装了复用代码，而没有建立起对象和类型间的关系。

（2）第二种是构造函数模式。js 中每一个函数都可以作为构造函数，只要一个函数是通过 new 来调用的，那么就可以把它称为构造函数。执行构造函数首先会创建一个对象，然后将对象的原型指向构造函数的 prototype 属性，然后将执行上下文中的 this 指向这个对象，最后再执行整个函数，如果返回值不是对象，则返回新建的对象。因为 this 的值指向了新建的对象，因此可以使用 this 给对象赋值。构造函数模式相对于工厂模式的优点是，所创建的对象和构造函数建立起了联系，因此可以通过原型来识别对象的类型。但是构造函数存在一个缺点就是，造成了不必要的函数对象的创建，因为在 js 中函数也是一个对象，因此如果对象属性中如果包含函数的话，那么每次都会新建一个函数对象，浪费了不必要的内存空间，因为函数是所有的实例都可以通用的。

（3）第三种模式是原型模式，因为每一个函数都有一个 prototype 属性，这个属性是一个对象，它包含了通过构造函数创建的所有实例都能共享的属性和方法。因此可以使用原型对象来添加公用属性和方法，从而实现代码的复用。这种方式相对于构造函数模式来说，解决了函数对象的复用问题。但是这种模式也存在一些问题，一个是没有办法通过传入参数来初始化值，另一个是如果存在一个引用类型如 Array 这样的值，那么所有的实例将共享一个对象，一个实例对引用类型值的改变会影响所有的实例。

（4）第四种模式是组合使用构造函数模式和原型模式，这是创建自定义类型的最常见方式。因为构造函数模式和原型模式分开使用都存在一些问题，因此可以组合使用这两种模式，通过构造函数来初始化对象的属性，通过原型对象来实现函数方法的复用。这种方法很好的解决了两种模式单独使用时的缺点，但是有一点不足的就是，因为使用了两种不同的模式，所以对于代码的封装性不够好。

（5）第五种模式是动态原型模式，这一种模式将原型方法赋值的创建过程移动到了构造函数的内部，通过对属性是否存在的判断，可以实现仅在第一次调用函数时对原型对象赋值一次的效果。这一种方式很好地对上面的混合模式进行了封装。

（6）第六种模式是寄生构造函数模式，这一种模式和工厂模式的实现基本相同，我对这个模式的理解是，它主要是基于一个已有的类型，在实例化时对实例化的对象进行扩展。这样既不用修改原来的构造函数，也达到了扩展对象的目的。它的一个缺点和工厂模式一样，无法实现对象的识别。

### 2. 对象继承的方式有哪些？ ###

（1）第一种是以原型链的方式来实现继承，但是这种实现方式存在的缺点是，在包含有引用类型的数据时，会被所有的实例对象所共享，容易造成修改的混乱。还有就是在创建子类型的时候不能向超类型传递参数。

（2）第二种方式是使用借用构造函数的方式，这种方式是通过在子类型的函数中调用超类型的构造函数来实现的，这一种方法解决了不能向超类型传递参数的缺点，但是它存在的一个问题就是无法实现函数方法的复用，并且超类型原型定义的方法子类型也没有办法访问到。

（3）第三种方式是组合继承，组合继承是将原型链和借用构造函数组合起来使用的一种方式。通过借用构造函数的方式来实现类型的属性的继承，通过将子类型的原型设置为超类型的实例来实现方法的继承。这种方式解决了上面的两种模式单独使用时的问题，但是由于我们是以超类型的实例来作为子类型的原型，所以调用了两次超类的构造函数，造成了子类型的原型中多了很多不必要的属性。

（4）第四种方式是原型式继承，原型式继承的主要思路就是基于已有的对象来创建新的对象，实现的原理是，向函数中传入一个对象，然后返回一个以这个对象为原型的对象。这种继承的思路主要不是为了实现创造一种新的类型，只是对某个对象实现一种简单继承，ES5 中定义的 Object.create() 方法就是原型式继承的实现。缺点与原型链方式相同。

（5）第五种方式是寄生式继承，寄生式继承的思路是创建一个用于封装继承过程的函数，通过传入一个对象，然后复制一个对象的副本，然后对象进行扩展，最后返回这个对象。这个扩展的过程就可以理解是一种继承。这种继承的优点就是对一个简单对象实现继承，如果这个对象不是自定义类型时。缺点是没有办法实现函数的复用。

（6）第六种方式是寄生式组合继承，组合继承的缺点就是使用超类型的实例做为子类型的原型，导致添加了不必要的原型属性。寄生式组合继承的方式是使用超类型的原型的副本来作为子类型的原型，这样就避免了创建不必要的属性。

### 3. 如何判断一个对象是否属于某个类？ ###

*  第一种方式是使用 instanceof 运算符来判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。
 *  第二种方式可以通过对象的 constructor 属性来判断，对象的 constructor 属性指向该对象的构造函数，但是这种方式不是很安全，因为 constructor 属性可以被改写。
 *  第三种方式，如果需要判断的是某个内置的引用类型的话，可以使用 Object.prototype.toString() 方法来打印对象的\[\[Class\]\] 属性来进行判断。

## 四、垃圾回收与内存泄漏 ##

### 1. 浏览器的垃圾回收机制 ###

#### （1）垃圾回收的概念 ####

**垃圾回收**：JavaScript代码运行时，需要分配内存空间来储存变量和值。当变量不在参与运行时，就需要系统收回被占用的内存空间，这就是垃圾回收。  
**回收机制**：

*  Javascript 具有自动垃圾回收机制，会定期对那些不再使用的变量、对象所占用的内存进行释放，原理就是找到不再使用的变量，然后释放掉其占用的内存。
 *  JavaScript中存在两种变量：局部变量和全局变量。全局变量的生命周期会持续要页面卸载；而局部变量声明在函数中，它的生命周期从函数执行开始，直到函数执行结束，在这个过程中，局部变量会在堆或栈中存储它们的值，当函数执行结束后，这些局部变量不再被使用，它们所占有的空间就会被释放。
 *  不过，当局部变量被外部函数使用时，其中一种情况就是闭包，在函数执行结束后，函数外部的变量依然指向函数内部的局部变量，此时局部变量依然在被使用，所以不会回收。

#### （2）垃圾回收的方式 ####

现在浏览器通常使用的垃圾回收方法有两种：标记清除，引用计数。  
**1）标记清除**

*  标记清除是浏览器常见的垃圾回收方式，当变量进入执行环境时，就标记这个变量“进入环境”，被标记为“进入环境”的变量是不能被回收的，因为他们正在被使用。当变量离开环境时，就会被标记为“离开环境”，被标记为“离开环境”的变量会被内存释放。
 *  垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记。然后，它会去掉环境中的变量以及被环境中的变量引用的标记。而在此之后再被加上标记的变量将被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后。垃圾收集器完成内存清除工作，销毁那些带标记的值，并回收他们所占用的内存空间。

**2）引用计数**

*  另外一种垃圾回收机制就是引用计数，这个用的相对较少。引用计数就是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型赋值给该变量时，则这个值的引用次数就是1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数就减1。当这个引用次数变为0时，说明这个变量已经没有价值，因此，在在机回收期下次再运行时，这个变量所占有的内存空间就会被释放出来。
 *  这种方法会引起**循环引用**的问题：

`obj1`和`obj2`通过属性进行相互引用，两个对象的引用次数都是2。当使用循环计数时，由于函数执行完后，两个对象都离开作用域，函数执行结束，`obj1`和`obj2`还将会继续存在，因此它们的引用次数永远不会是0，就会引起循环引用。

function fun() { 
        let obj1 = { };
        let obj2 = { };
        obj1.a = obj2; // obj1 引用 obj2
        obj2.a = obj1; // obj2 引用 obj1
    }

这种情况下，就要手动释放变量占用的内存：

obj1.a =  null
     obj2.a =  null

#### （3）减少垃圾回收 ####

虽然浏览器可以进行垃圾自动回收，但是当代码比较复杂时，垃圾回收所带来的代价比较大，所以应该尽量减少垃圾回收。

*  **对数组进行优化：** 在清空一个数组时，最简单的方法就是给其赋值为\[ \]，但是与此同时会创建一个新的空对象，可以将数组的长度设置为0，以此来达到清空数组的目的。
 *  **对`object`进行优化：** 对象尽量复用，对于不再使用的对象，就将其设置为null，尽快被回收。
 *  **对函数进行优化：** 在循环中的函数表达式，如果可以复用，尽量放在函数的外面。

### 2. 哪些情况会导致内存泄漏 ###

以下四种情况会造成内存的泄漏：

*  **意外的全局变量：** 由于使用未声明的变量，而意外的创建了一个全局变量，而使这个变量一直留在内存中无法被回收。
 *  **被遗忘的计时器或回调函数：** 设置了 setInterval 定时器，而忘记取消它，如果循环函数有对外部变量的引用的话，那么这个变量会被一直留在内存中，而无法被回收。
 *  **脱离 DOM 的引用：** 获取一个 DOM 元素的引用，而后面这个元素被删除，由于一直保留了对这个元素的引用，所以它也无法被回收。
 *  **闭包：** 不合理的使用闭包，从而导致某些变量一直被留在内存当中。

[2021_HTML]: https://blog.csdn.net/qq_42033567/article/details/112071110?spm=1001.2014.3001.5502
[2021_CSS]: https://blog.csdn.net/qq_42033567/article/details/112071451?spm=1001.2014.3001.5502
[2021]: https://blog.csdn.net/qq_42033567/article/details/112653740?spm=1001.2014.3001.5502
[2021 1]: https://blog.csdn.net/qq_42033567/article/details/113712881?spm=1001.2014.3001.5502
[2021_Vue]: https://blog.csdn.net/qq_42033567/article/details/112845456?spm=1001.2014.3001.5502
[2021_React]: https://blog.csdn.net/qq_42033567/article/details/113850143?spm=1001.2014.3001.5502
[2021_JavaScript]: https://cuggz.blog.csdn.net/article/details/114555100
[2021_JavaScript 1]: https://cuggz.blog.csdn.net/article/details/114555370
[2021 2]: https://cuggz.blog.csdn.net/article/details/114955244
[20210308230437407.png]: /images/20221023/019f3fb3384b4ec4b8a34426924e92bd.png
[20210308230508434.png]: /images/20221023/e40d7c9e50094cc0a99240f65a3cdc78.png