this问题

先有以下规律：

• 在函数体中，非显式或隐式地简单调用函数时，在严格模式下，函数体内的this会被绑定到undefined上，在非严格模式下则会被绑定到全局对象window/global上。
• 一般使用new方法调用构造函数时，构造函数内的this会被绑定到新创建的对象上。
• 一般通过call/apply/bind方法显示调用函数时，函数体内的this会被绑定到指定参数的对象上。
• 一般通过上下文对象调用函数时，函数体内的this会被绑定到该对象上。
• 在剪头函数中，this指向的是外层（函数或全局）作用域。

例题分析1：全局环境中的this

function f1() {
    console.log(this)
}
function f2() {
    'use strict'
    console.log(this)
}
f1()  //window
f2()  //undefined

变题：

const foo = {
    bar: 10,
    fn() {
        console.log(this)  //调用时才确定
        console.log(this.bar)   
    }
}
let fn1 = foo.fn
fn1()     //window undefined   因为fn1在全局环境下调用
// 如果用以下方式调用
foo.fn()  
//{bar:10,fn:f}
//10

例题分析2：上下文对象调用中的this

const student = {
    name:'zzd',
    fn() {
        return this
    }
}
console.log(student.fn() === student)  //true

当存在更复杂的调用关系时，this会指向最后调用它的对象。

const person = {
    name:'zzd',
    brother:{
        name:'mike',
        fn() {
            return this.name
        }
    }
}
console.log(person.brother.fn())  //mike

const o1 = {
    text:'o1',
    fn() {
        return this.text
    }
}
const o2 = {
    text:'o2',
    fn() {
        return o1.fn()
    }
}
const o3 = {
    text:'o3',
    fn() {
        let fn = o1.fn
        return fn()
    }
}
console.log(o1.fn())   //o1
console.log(o2.fn())   //o1
console.log(o3.fn())   //undefined

第二个最终还是调用的o1.fn()，所以this还是指向o1；第三个o3.fn()通过let fn = o1.fn的赋值进行了“裸奔”调用(前面没有调用者)，o3.fn()返回了因此this指向window。

追问：如果要让console.log(o2.fn())输出o2，该怎么做？

可以用bind等方法，还可以用：

const o2 = {
    text:'o2',
    fn: o1.fn
}

因此，this指向最终调用它的对象。上面代码中，我们提前将fn挂载到o2对象，所以this指向o2。

例题分析3：bind、call、apply改变this指向

call和apply是直接进行相关函数调用的；bind不会执行相关函数，而是返回一个新的函数，这个新的函数已经自动绑定了新的this指向。

//以下三个相等
const target = {}
fn.call(target, 'arg1', 'arg2')
fn.apply(target, ['arg1', 'arg2'])
fn.bind(target,'arg1','arg2')()

例题分析4：构造函数和this

function F00() {
    this.bar = 'zzd'
}
const instance = new Foo()
console.log(instance.bar)

new做了什么？

• 创建了一个新对象
• 把新对象的[[proto]]指向构造函数内的原型对象
• 让构造函数的this指向新对象并调用构造函数，添加属性方法
• 返回这个对象

上面代码等价于：

let obj = {}
obj.__proto__ = Foo.prototype
Foo.call(obj)

例题分析5：箭头函数中的this

箭头函数中的this指向是由其所属函数或全局作用域决定的。

下面这段代码，this出现在setTimeout的匿名函数中，因此this指向window对象。

setTimeout中函数内的this是指向了window对象，这是由于setTimeout()调用的代码运行在与所在函数完全分离的执行环境上。这会导致这些代码中包含的 this 关键字会指向 window (或全局)对象。

const foo = {
    fn() {
        setTimeout(function () {
            console.log(this)
        })
    }
}
console.log(foo.fn())   //window

如果需要让this指向foo这个对象，则可以巧用箭头函数来解决：

const foo = {
    fn() {
        setTimeout( () => {
            console.log(this)
        })
    }
}
console.log(foo.fn())   //{fn:f} 外层作用域

例题分析6：this优先级

常常把通过call、apply、bind、new对this进行绑定的情况称为显式绑定，而把根据调用关系确定this指向的情况称为隐式绑定。

那么显式绑定和隐式绑定哪个优先级更高呢？

function foo(a) {
    console.log(this.a)
}
const obj1 = {
    a:1,
    foo:foo
}
const obj2 = {
    a:2,
    foo:foo
}
obj1.foo.call(obj2)   //2
obj2.foo.call(obj1)   //1

说明显式绑定一般来说优先级更高。

function foo(a) {
    this.a = a
}
const obj1 = {}
let bar = foo.bind(obj1)
bar(2)
console.log(obj1.a)

上面代码通过bind将bar函数中的this绑定为obj1对象。执行bar(2)后，obj1.a值为2。

当再使用bar作为构造函数时，会输出3：

let baz = new bar(3)
console.log(baz.a)

bar函数本身是通过bind方法构造的函数，其内部已经将this绑定为obj1，当它再次作为构造函数通过new被调用时，返回的实例就已经与obj1解绑了。也就是说，new绑定修改了bind绑定中的this指向，因此new绑定的优先级比显示bind绑定的高。

function foo() {
    return a => {
        console.log(this.a)
    };
}
let obj1 = { a:2 }
let obj2 = { a:3 }
const bar = foo.call(obj1)
console.log(bar.call(obj2))   //2

由于foo中的this绑定到了obj1上，所以bar（引用箭头函数）中的this也会绑定到obj1上，箭头函数的绑定无法被修改。

如果将foo完全写成如下箭头函数的形式，则会输出undefined，因为let声明的变量不会挂载到window全局对象上。

let a = 123
let obj1 = { a:2 }
let obj2 = { a:3 }
const foo = () => a => {
    console.log(this.a)
}
let bar = foo.call(obj1)
console.log(bar.call(obj2))

闭包

作用域

作用域可以理解为某种规则下的限定范围，该规则用于在特定场景下查找变量。

函数作用域和全局作用域

执行以下foo函数时，变量a在函数foo的作用域内，因此可以在函数体内正常访问该变量：

function foo() {
    let a = 'bar'
    console.log(a)
}
foo()

如果改为如下形式，foo在自身函数作用域内没找到b，就会向外找，在全局作用域找到b：

let b = 'bar'
function foo() {
    console.log(b)
}
foo()

总结：在js执行某个函数时，如果遇见变量且需要读取其值，就会就近先在函数内部查找该变量的声明和赋值情况。没找到就沿作用域链一层一层查找。

块级作用域和暂时性死区

块级作用域指作用域范围限制在代码块中。暂时性死区指的是我们在使用let、const声明变量时会针对这个变量形成一个封闭的块级作用域，在这个块级作用域中，如果在声明变量前访问该变量就会报错。

function foo() {
    console.log(bar)   
    let bar = 3;
    console.log(bar)  
}
foo()   //Uncaught ReferenceError:bar is not defined

暂时性死区起始于函数开头，终止于相关变量声明语句的所在行。

对于上图的暂时性死区，有一种极端情况是，函数的参数默认值设置也会受到它的影响：

function foo(arg1 = arg2, arg2) {   //默认参数
    console.log(`${arg1} ${arg2}`)
}
foo('arg1','arg2')
//返回arg1 arg2

在上面的foo函数中，如果没有传第一个参数，则会使用第二个参数作为第一个实参。但是当第一个参数为默认值时，执行arg1=arg2会被当做暂时性死区处理。也就是说，不要在形参中提前使用未定义的变量。

foo(undefined,'arg2')
//Uncaught ReferenceError:arg2 is not defined

function foo(arg1) {   //这里已经声明
    let arg1;
}
foo('arg1')
//Uncaught SyntaxError:Identifier 'arg1' has already been declared

执行上下文和调用栈

执行上下文就是当前代码的执行环境/作用域，和前文介绍的作用域链相辅相成，但又是完全不同的两个概念。直观上看，执行上下文包含了作用域链，有了作用域链，才会有执行上下文的一部分。

代码执行的两个阶段

• 代码预编译阶段
• 代码执行阶段

预编译阶段是前置阶段，这一阶段编译器将js代码编译成可执行的代码。注意，这里与传统的编译不同，传统的编译非常复杂，涉及分词、解析、代码生成等过程。这里的预编译是js的独特概念，虽然js是解释性语言，编译一行执行一行。但是在代码执行前，js引擎确实会做一些预先准备工作。

执行阶段的主要任务是执行代码逻辑，执行上下文在这个阶段会全部创建完成。

在通过语法分析，确认语法无误之后，便会在预编译阶段对js代码中变量的内存空间进行分配，变量提升过程便是在此阶段完成。

预编译过程的细节，应注意3点：

• 在预编译阶段进行变量声明。
• 对变量声明进行提升，值是undefined。
• 对所有非表达式的函数声明进行提升。

函数提升要比变量提升的优先级要高一些，且不会被变量声明覆盖，但是会被变量赋值之后覆盖。

function bar() {
    console.log('bar1')
}
var bar = function () {
    console.log('bar2')
}
bar()  //bar2

var bar = function () {
    console.log('bar2')
}
function bar() {
    console.log('bar1')
}
bar()  //bar2

都是输出bar2，因为在预编译阶段虽然对变量bar进行了声明，但是不会对其进行赋值；函数bar则被创建并被提升。在代码执行阶段，变量bar才会（通过表达式）被赋值，赋值的内容会打印bar2。

foo(10)
function foo(num) {
    console.log(foo)
    foo = num;
    console.log(foo)
    var foo
    }
console.log(foo)
foo = 1
console.log(foo)

输出：

undefined
10
foo(num) {
    console.log(foo)
    foo = num;
    console.log(foo)
    var foo
}
1

在foo(10)执行时，会在函数体内进行变量提升，此时执行函数体内的第一行会输出undefined，执行函数体内的第三行会输出foo。接着运行代码，运行到函数体外第九行会输出foo函数的内容。

上题结论是，作用域在预编译阶段确定，但是作用域链是在执行上下文的创建阶段完全生成的，因为函数在调用时才会开始创建对应的执行上下文。执行上下文包括变量对象、作用域链、this指向。

代码执行的整个过程就像一条流水线。首先是在预编译阶段创建变量对象，此时只是创建还未赋值；然后是代码执行阶段，变量对象会转为激活对象。此时作用域链也将被确定，它由当前执行环境的变量对象和所有外层已经完成的激活对象组成，保证了变量和函数的有序访问，即如果在当前作用域找不到变量会继续向上直到全局作用域。

调用栈

在执行函数时，如果这个函数又调用了另一个函数，而这另一个函数又调用了另一个函数，这样便形成了一系列的调用栈：

function foo1() {
    foo2()
}
function foo2() {
    foo3()
}
function foo3() {
    foo4()
}
function foo4() {
    console.log('foo4')
}
foo1()

具体过程：foo1先入栈，foo2入栈，foo3入栈，以此类推，直到foo4执行完，foo4先出栈，以此类推。形成调用栈。

在函数执行完毕并出栈时，函数内的局部变量在下一个垃圾回收节点会被回收，该函数对应的执行上下文将会被销毁，这也是我们在外界无法访问函数内定义的变量的原因。也就是说，只有在函数执行时，相关函数才可以访问该变量，该变量会在预编译阶段被创建，在执行阶段被激活，在函数执行完毕后，其相关上下文会被销毁。

闭包

函数嵌套函数时，内层函数引用了外层函数作用域下的变量，并且内层函数在全局环境下可访问，进而形成闭包。

function numGenerator() {
    let num = 1;
    num++;
    return () => {
        console.log(num)
    }
}
let getNum = numGenerator()
getNum()

numGenerator创建了一个变量num，接着返回打印num值的匿名函数，这个函数引用了num，使得在外部可以通过调用getNum方法访问变量num，因此在numGenerator执行完毕后，即相关调用栈出栈后，num变量不会消失，仍有机会被外界访问。

在正常情况下外界是无法访问函数内部变量的，函数执行完，上下文即被销毁。但是在外层函数中返回了另一个函数，且这个函数使用了外层函数的变量，那么外界便能通过这个返回的函数获取原外层函数内部的变量值。这就是闭包的基本原理。

内存管理

指对内存生命周期的管理，即分配、读写、释放内存。

let foo = 'bar' //分配
alert(foo)  //读写
foo=null  //释放

基本概念

内存空间可以分为栈和堆。

• 栈空间：一般由开发者分配释放，关于这部分空间要考虑垃圾回收的问题。
• 堆空间：由操作系统自动分配释放，存放函数的参数值、局部变量的值等。

js数据类型中的基本数据类型按照值保存在栈空间中，占有固定大小的内存空间；引用类型保存在堆空间中，内存空间大小不固定，需要按引用情况进行访问（栈中指针）。

内存泄漏是指内存空间已经不再被使用，但由于某种原因并没有被释放的现象。会导致程序运行缓慢甚至崩溃。

内存泄漏场景举例

let element = document.getElementById("element");
element.mark = "marked";
function remove() {
    element.parentNode.removeChild(element)
}

在上面代码中，我们只是把id为element的节点移除了，但是变量element还在，该节点占有的内存无法被释放。为了解决这一问题，我们需要在remove方法中添加element=null。

let element = document.getElementById('element');
element.innerHTML = '<button id="button">点击</button>'
let button = document.getElementById('button')
button.addEventListener('click', function () {})
element.innerHTML = ''

执行第5行，button已经从DOM中移除了，但由于其事件处理句柄还在，所以该节点依然无法被回收。因此还需添加removeEventListener函数，防止内存泄露。

function foo() {
    let name = 'zzd'
    window.setInterval(function () {
        console.log(name)
    },1000)
}
foo()

由于存在window.setInterval，所以name内存空间始终无法被释放，如果不是业务要求的话，记得要在合适的时候使用clearInterval清理。

例题分析1

const foo = (function () {
    let v = 0
    return () => {
        return v++
    }
}())
for (let i = 0; i < 10; i++) {
    foo()
}
console.log(foo())   //10

foo是一个立即执行函数，是一个箭头函数，在循环执行foo时，引用自由变量10次，v自增10次，最后执行foo时，得到10。这里的自由变量是指没有在相关函数作用域中声明，但却被使用了的变量。

例题分析2

const foo = () => {
    let arr = []
    let i 
    for(i = 0; i < 10; i++) {
        arr[i] = function () {
            console.log(i)
        }
    }
    return arr[0]
}
foo()()    //10

本题中自由变量为i，执行foo返回arr[0]，是一个函数，其中变量i的值为10，如果i在for循环里声明，就是0。

例题分析3

let fn = null
const foo = () => {
    let a = 2
    function innerFoo() {
        console.log(a)
    }
    fn = innerFoo
}
const bar = () => {
    fn()
}
foo()
bar()   //2

正常来讲，foo执行完毕后，其执行环境生命周期会结束，所占用的内存会被垃圾收集器释放，上下文消失。但是通过innerFoo函数赋值给全局变量fn，foo的变量a也会被保留下来。所以，函数fn在函数bar内部执行时，依然可以访问这个被保留下来的变量对象。

例题分析4

将以上代码稍加修改

let fn = null
const foo = () => {
    let a = 2
    function innerFoo() {
        console.log(c)
        console.log(a)
    }
    fn = innerFoo
}
const bar = () => {
    let c = 100
    fn()
}
foo()
bar()

会报错，其实bar中执行fn时，fn已经被复制为innerFoo，变量c并不在其作用域链上，c只是bar函数的内部变量，因此会报错，c没有定义。

JavaScript高频考点及基础题库

数据类型及其判断

null、undefined、string、number、Boolean、Symbol、bigint、object（function、array、date等）

常见判断方法有以下四种：

• typeof xx

返回一个字符串（小写），用来判断：Undefined、String、Number、Boolean、Symbol、Object、Function，无法检测引用类型里的Array

优点：可区分Object与Function

缺点：（1）对于 Null ，返回 object 类型

原因：Null类型只有一个null值，该值表示一个空对象指针（出自JavaScript高级程序设计）

typeof的检测原理：不同的对象在底层都表示为二进制，在js中二进制前（低）三位存储其类型信息为：000: Object、100：String、110： Boolean、1： Number。null的二进制表示全为0，自然前三位也是0，所以执行typeof时会返回”object”。

（2） 对于Array、Date、RegExp都会返回object，不能更详细的区分

console.log(typeof '12');// string 
console.log(typeof 12);// number 
console.log(typeof undefined);// underfined 
console.log(typeof true);// boolean 
console.log(typeof null);// object

• xx instanceof xx

返回true/false，只能判断引用类型 ，无法检测基本类型

a instanceof B的判断原理：a是否为B的实例，即a的原型链上是否存在B的构造函数。

原理模拟：

const instanceofMock = (L, R) => {
    if (typeof L !=='object') {
        return false
    }
    while (true) {
        if (L === null) {
            //已经遍历到了顶端
            return false
        }
        if (R.prototype === L.__proto__) {
            return true
        }
        L = L.__proto__
    }
}

缺点：只能用来判断两个对象是否属于实例关系， 而不能判断一个对象实例具体属于哪种类型（原型链上的都会返回true）

console.log('abc' instanceof String);// false 
console.log(String('abc') instanceof String);// true 
console.log(12 instanceof Number);// false 
console.log(new Number(12) instanceof Number);// true 
console.log(true instanceof Boolean);// false 
console.log(new Boolean(true) instanceof Boolean);// true 
console.log({name:'yy'} instanceof Object);// true 
console.log(new Object({name:'yy'}) instanceof Object);// true
console.log(['12','123'] instanceof Object);// true 
console.log(['12','123'] instanceof Array);// true 
console.log(new Array('12',32) instanceof Object);// true 
console.log(new Array('12',32) instanceof Array);// true 
console.log(function(){} instanceof Object);// true 
console.log(function(){} instanceof Function);// true 
console.log(new Function() instanceof Function);// true 
console.log(new Date() instanceof Object);// true 
console.log(new RegExp instanceof Object);// true 
console.log(new String('abc') instanceof Object);// true 
console.log(new Number(12) instanceof Object);// true

• xx.constructor === xx

返回true/false，判断原理：

p.constructor === Person.prototype.constructor   //继承

当一个函数F被定义时，JS引擎会为F添加prototype原型，然后再在prototype上添加一个constructor属性，并让其指向F的引用

具体来说：当 var f = new F() 时，F被当成了构造函数，f是F的实例对象，此时F原型上的constructor传递到了f上，因此f.constructor === F

缺点：不可判断Null、Undefined是无效的对象，没有constructor存在

constructor 是不稳定的，如创建的对象更改了原型，无法检测到最初的类型

console.log(''.constructor === String);//true
console.log(new Number(1).constructor === Number);//true
console.log([].constructor === Array);//true
console.log(true.constructor === Boolean);//true
console.log(new Function().constructor === Function;);//true
console.log(new Date().constructor === Date);//true
console.log(document.constructor === HTMLDocument);//true

• Object.prototype.toString.call(xx)

返回“[object type]”（字符串），能判断所有类型，万金油方法

判断原理：JS中的所有对象都是继承自Object对象的，通过call方法（显式绑定）改变this指向，利用Object.prototype上的原生toString()方法判断数据类型

console.log(Object.prototype.toString.call(123));//[object Number]
console.log(Object.prototype.toString.call('123'));//[object String]
console.log(Object.prototype.toString.call(undefined));//[object Undefined]
console.log(Object.prototype.toString.call(true));//[object Boolean]
console.log(Object.prototype.toString.call({}));//[object Object]
console.log(Object.prototype.toString.call([]));//[object Array]
console.log(Object.prototype.toString.call(function(){}));//[object Function]

数据类型及其转换

对于加法操作，如果加号两边都是number类型，则规则如下：

• 加号两边存在NaN，结果为NaN（typeof NaN 为number）
• Infinity+Infinity = Infinity
• -Infinity+(-Infinity) = -Infinity
• Infinity+(-Infinity) = NaN

如果加号两边至少有一个字符串：

• 都是字符串则拼接
• 一个是字符串则将另外的值转换为字符串再拼接
• 有一个值是字符串，另一个值是对象则调用valueof或toString方法取得值，将其转换为基本数据类型再进行拼接。

函数参数传递

let foo = 1
const bar = value => {
    value = 2;
    console.log(value);
}
bar(foo)   //2
console.log(foo)   //1

当参数是基本数据类型时，函数体内会复制一份参数值，而不会影响原参数的实际值。

let foo = {bar:1}
const func = obj => {
    obj.bar = 2;
    console.log(obj.bar)
}
func(foo)   //2
console.log(foo)  //{bar:2}

函数参数是引用类型时，那么当在函数体内修改这个引用类型参数的某个属性值时，也将对原来的参数进行修改，因为此时函数体内的引用地址指向了原来的参数。

但是如果在函数体内直接修改对参数的引用则情况又不一样：

let foo = {bar:1}
const func = obj => {
    obj = 2;
    console.log(obj)
}
func(foo)   //2
console.log(foo)  //{bar:1}

总结：

• 函数参数为基本数据类型时，函数体内复制了一份参数值，任何操作都不会影响原参数的实际值。
• 函数参数是引用类型时，当在函数体内修改这个值的某个属性时，将会对原来的参数进行修改。
• 函数参数是引用类型时，如果直接修改这个值的引用地址，则相当于在函数体内新创建了一个引用，不会影响原参数的实际值。

异步

移动元素

移动页面上的元素target(document.querySelectorAll(‘#man’)[0])，先从原点出发向左移动20px，再向上移动50px，最后向左移动30px，请把运动路径动画实现出来。

我们将移动过程封装成一个walk函数，接收3个参数。

• direction：字符串，表示移动方向，这里简化为left、top两种。
• distance：整形，可正可负。
• callback：执行动作后的回调。

回调方案

每一个任务都是相互联系的：当前任务结束后将会马上进入下一个流程，如何将这些流程串联起来呢，这里采用最简单的回调来明确指示下一个任务。

const target = document.querySelectorAll('#man')[0]
target.style.cssText = `
        position:absolute;
        left:0px;
        top:0px
    `
const walk = (direction, distance, callback) => {
    setTimeout(() => {
        let currentLeft = parseInt(target.style.left, 10)
        let currentTop = parseInt(target.style.top, 10)
        const shouldFinish = (direction === 'left' && currentLeft === -distance) ||
              (direction === 'top' && currentTop === -distance)
        if (shouldFinish) {
            //任务执行结束，执行下一个回调
            callback &&callback()
        } else {
            if(direction === 'left') {
                currentLeft--
                target.style.left = `${currentLeft}px`
            }
            else if (direction === 'top') {
                currentTop--
                target.style.top = `${currentTop}px`
            }
            walk(direction, distance, callback)
        }
    }, 20)
}
walk('left',20,() =>{
    walk('top',50,() => {
        walk('left',30,Function.prototype)
    })
})

Promise方案

const target = document.querySelectorAll('#man')[0]
target.style.cssText = `
        position:absolute;
        left:0px;
        top:0px
    `
const walk = (direction, distance) => {
    return new Promise((resolve, reject) => {
        const innerWalk = () => {
            setTimeout(() => {
                let currentLeft = parseInt(target.style.left,10)
                let currentTop = parseInt(target.style.top,10)
                const shouldFinish = (direction === 'left' && currentLeft === -distance) ||
                      (direction === 'top' && currentTop === -distance)
                if (shouldFinish) {
                    resolve()
                }
                else {
                    if(direction === 'left') {
                        currentLeft--
                        target.style.left = `${currentLeft}px`
                    }
                    else if (direction === 'top') {
                        currentTop--
                        target.style.top = `${currentTop}px`
                    }
                    innerWalk()
                }
            },20)
        }
        innerWalk()
    })
}
walk('left',20)
    .then(() => walk('top',50))
    .then(() => walk('left',30))

async/await方案

walk函数定义同上，现在只需执行task函数即可。

const task = async function() {
    await walk('left',20)
    await walk('top',50)
    await walk('left',30)
}

红绿灯任务控制

红灯3s亮一次，绿灯1s亮一次，黄灯2s亮一次，如何让3个灯不断交替重复地亮呢？

已知3个亮灯函数已经存在：

function red() {
    console.log('red');
}
function green() {
    console.log('green')
}
function yellow() {
    console.log('yellow')
}

回调方案

const task = (timer, light, callback) => {
    setTimeout(() => {
        if (light === 'red') {
            red()
        }
        else if (light === 'green') {
            green()
        }
        else if (light === 'yellow') {
            yellow()
        }
        callback()
    }, timer)
}
task(3000, 'red', () => {
    task(1000, 'green', () => {
        task(2000, 'yellow', Function.prototype)
    })
})

上面代码有一个bug，代码只完成了一次交替亮灯，那么如何交替重复亮灯呢？可以通过递归使灯交替被点亮。

const step = () => {
    task(3000, 'red', () => {
        task(1000, 'green', () => {
            task(2000, 'yellow', step)  //循环亮灯
        })
    })
}
step()

Promise方案

const task = (timer, light) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (light === 'red') {
                red()
            } else if (light === 'green') {
                green()
            } else if (light === 'yellow') {
                yellow()
            }
            resolve()
        }, timer)
    })
}
const step = () => {
    task(3000, 'red')
        .then(() => task(1000, 'green'))
        .then(() => task(2000, 'yellow'))
        .then(step)
}
step()

async/await方案

const taskRunner = async () => {
    await task(3000, 'red')
    await task(1000, 'green')
    await task(2000, 'yellow')
    taskRunner()
}
taskRunner()

请求图片进行预加载

假设urlIds数组预先就存在，数组中的每一项都可以按照规则拼接成一个完整的图片地址，那么请根据这个数组，依次请求图片进行预加载。

先实现一个请求图片的方法：

const loadImg = urlId => {
    const url = `https://www.image.com/${urlId}`
    return new Promise((resolve, reject) => {
        const img = new Image()
        img.onerror = function () {
            reject(urlId)
        }
        img.onload = function () {
            resolve(urlId)
        }
        img.src = url
    })
}

该方法进行过Promise化处理，在图片成功加载时执行resolve，失败时执行reject。

根据图片urlId，依次请求图片：

const urlIds = [1,2,3,4,5]
urlIds.reduce((prevPromise, urlId) => {
    return prevPromise.then(() => loadImg(urlId))
}, Promise.resolve())

或者用面向过程的方法实现：

const urlIds = [1,2,3,4,5]
const loadImgOneByOne = index => {
    const length = urlIds.length
    loadImg(urlIds[index]).then(() => {
        if (index === length - 1) { return }
        else {
            loadImgOneByOne(++index)
        }
    })
}
loadImgOneByOne(0)

还可以用async/await实现：

const urlIds = [1,2,3,4,5]
const loadImgOneByOne = async () => {
    for (i of urlIds) {
        await loadImg(urlIds[i])
    }
}
loadImgOneByOne()

上述代码的请求是依次执行的，只有成功加载完第一张图片，才能继续加载下一张。

如果想提高效率，将所有图片的请求一次性发出，应该：

const urlIds = [1,2,3,4,5]
const promiseArray = urlIds.map(urlId => loadImg(urlId))
Promise.all(promiseArray)
    .then(() => {
    console.log('finish load all')
})
    .catch(() => {
    console.log('promise all catch')
})

setTimeout相关考查

setTimeout(() => {
    console.log('setTimeout block')
}, 100)
while (true) {}
console.log('end here')

以上代码不会得到输出，因为while一直循环，主线程将被占用。但执行以下代码将会打印end here。

setTimeout(() => {
    console.log('setTimeout block')
    while (true) {}
}, 0)
console.log('end here')

这段代码执行后，再执行任何语句都不会得到响应。

由此可以延伸出，JavaScript中的任务分为同步和异步任务。

• 同步任务：当前主线程将要执行的任务，这些任务一起形成执行栈。
• 异步任务：不进入主线程，进入任务队列，不会马上执行的任务。

当同步任务全部执行，主线程空闲时，即执行栈为空时，会执行任务队列里的异步任务。

这样的机制保证了：虽然JavaScript是单线程的，但是对于一些耗时的任务，我们可以将其丢入任务队列中，这样就不会阻碍其他同步代码的执行。

宏任务和微任务

任务队列中的异步任务分为宏任务和微任务。

宏任务包括：

• script(整体代码)
• setTimeout
• setInterval
• I/O
• 事件
• postMessage
• requestAnimationFrame
• UI渲染

微任务包括：

• Promise
• MutationObserver
• Process.nextTick

console.log('start here')
const foo = () => (new Promise((resolve, reject) => {
    console.log('first promise constructor')
    let promise1 = new Promise((resolve1, reject1) => {
        console.log('second promise constructor')
        setTimeout(() => {
            console.log('setTimeout here')
        }, 0)
        resolve1('promise1')
    })
    resolve('promise0')
    promise1.then(arg => {
        console.log(arg)
    })
}))
foo().then(arg => {
    console.log(arg)
})
console.log('end here')

• 首先打印第一行，再执行foo函数，同步输出first promise constructor。
• 继续执行foo函数，遇见promise1，执行promise1的构造函数，同步输出second promise constructor及end here。同时，按照顺序依次执行以下操作，setTimeout回调进入任务队列（宏任务），promise1的完成处理函数进入任务队列（微任务）。
• 虽然setTimeout的回调先进入任务队列，但是引擎会优先执行微任务，按照微任务的顺序输出promise1的结果，在输出promise0的结果。
• 此时，微任务都处理完了，开始执行宏任务，输出setTimeout here。

由上分析可知，每次主线程执行栈为空的时候，引擎会优先处理微任务队列，处理完微任务队列里的所有任务，再处理宏任务。

console.log('start here')
setTimeout(() => {
    console.log('setTimeout')
}, 0)
new Promise((resolve, reject) => {
    resolve('promise result')
}).then(
    value => {
        console.log(value)
    }
)
console.log('end here')
//start here
//end here
//promise result
//setTimeout

真的要手写Promise吗？

Promise雏形

Promise其实就是一个构造函数，它只有一个参数，叫做executor，它是函数类型的参数。这个函数又自动具有resolve、reject两个方法作为参数。

Promise构造函数返回一个Promise实例对象，这个返回的Promise对象具有一个then方法（在Promise的原型对象上）。在then方法中，可以定义onfulfilled和onrejected两个函数类型的参数。onfulfilled通过参数可以获取Promise对象经过resolve处理后的值，onrejected可以获取Promise经过reject处理后的值。通过这个值来处理异步操作完成后的逻辑。

先添加then方法

function PromiseMock(executor) {}
PromiseMock.prototype.then = function (onfulfilled, onrejected) {}

let promise1 = new Promise((resolve, reject) => {
    resolve('data')
})
promise1.then(data => console.log(data))

(resolve, reject) => {
    resolve('data')
}   //这一整个会被传到构造函数作为executor

在使用new调用Promise构造函数时，在合适的时机（往往是异步操作结束时）调用executor的参数resolve，并将resolve处理后的值作为resolve的函数参数执行，这个值便可以在后续then方法的第一个函数参数onfulfilled中拿到，reject同理。

因此我们在实现Promise时，应该有两个变量，分别存储经过resolve处理后的值，以及经过reject处理后的值（当然，因为promise状态的唯一性，不可能同时存在经过resolve、reject处理后的值，因此用一个变量存储也可以；同时还需存在一个状态，这个状态就是promise实例的状态（pending、fulfilled、rejected）；最后要提供resolve方法和reject方法，这两个方法需要作为executor的参数提供给开发者使用：

function PromiseMock(executor) {
    this.status = 'pending';
    this.value = null;
    this.reason = null;
    const resolve = value => {
        this.value = value;   
    }
    const reject = reason => {
        this.reason = reason
    }
    executor(resolve,reject)  //在合适的时机调用！
}
PromiseMock.prototype.then = function (onfulfilled = Function.prototype, onrejected = Function.prototype) {
    onfulfilled(this.value)  //拿到resolve()处理后的值
    onrejected(this.reason)
}

注意：因为resolve的最终调用是由开发者在不确定的环境下（往往是全局中）直接调用的，因此为了在resolve函数中能够拿到promise实例的值，需要用self对this进行保存，也可以用箭头函数保证this准确性。

Promise实现状态完善

Promise实例的状态只能从pending变为fulfilled，或者从pending变为rejected。状态一旦发生改变就不可变化。下面对状态进行判断和完善。

function PromiseMock(executor) {
    this.status = 'pending';
    this.value = null;
    this.reason = null;
    const resolve = value => {
        if (this.status === 'pending') {
            this.value = value;
            this.status = 'fulfilled'
        }
    }
    const reject = reason => {
        if (this.status === 'pending') {
            this.reason = reason;
            this.status = 'rejected'
        }
    }
    executor(resolve,reject)
}
PromiseMock.prototype.then = function (onfulfilled, onrejected) {
    onfulfilled = typeof onfulfilled === 'function' ? onfulfilled : data => data
    onrejected = typeof onrejected === 'function' ? onrejected : error =>{ throw error }
    if(this.status === 'fulfilled') {
        onfulfilled(this.value)
    }
    if (this.status === 'rejected') {
        onrejected(this.reason)
    }
}

Promise异步实现完善

到现在实现的promise是同步的：

let promise1 = new PromiseMock((resolve, reject) => {
    setTimeout(() => {
        resolve('data')
    }, 2000)
})
promise1.then(data => {
    console.log(data)
})   //没有任何输出

实例化PromiseMock时，会在setTimeout中调用resolve，也就是说，2s之后才会调用resolve方法，更改promise实例状态。而结合我们的实现，then方法中的onfulfilled是同步执行的，它在执行时this.status仍然为pending。这时我们的then方法还没有添加pending的判断。

所以我们应该在合适的时间去调用onfulfilled方法，这个合适的时间应该是调用resolve的时刻，那么我们先在状态为pending时把开发者传进来的onfulfilled方法存起来，再在resolve方法中执行即可，也就是在pending时保存onfulfilled、onrejected，等到上面的定时器走完，要改变状态之后再执行：

function PromiseMock(executor) {
    this.status = 'pending';
    this.value = null;
    this.reason = null;
    this.onFullfilledFunc = Function.prototype;
    this.onRejectedFunc = Function.prototype;
    const resolve = value => {
        if (this.status === 'pending') {
            this.value = value;
            this.status = 'fulfilled'
            this.onFullfilledFunc(this.value)
        }
    }
    const reject = reason => {
        if (this.status === 'pending') {
            this.reason = reason;
            this.status = 'rejected'
            this.onRejectedFunc(this.reason)
        }
    }
    executor(resolve,reject)
}
PromiseMock.prototype.then = function (onfulfilled, onrejected) {
    onfulfilled = typeof onfulfilled === 'function' ? onfulfilled : data => data
    onrejected = typeof onrejected === 'function' ? onrejected : error =>{ throw error }
    if(this.status === 'fulfilled') {
        onfulfilled(this.value)
    }
    if (this.status === 'rejected') {
        onrejected(this.reason)
    }
    if (this.status === 'pending') {
        this.onFullfilledFunc = onfulfilled
        this.onRejectedFunc = onrejected
    }
}

此时代码已经能支持异步执行了，但还有问题：

let promise1 = new PromiseMock((resolve, reject) => {
    resolve('data')
})
promise1.then(data => {
    console.log(data)
})
console.log(1)  //先输出了data然后是1，与实际相反。

因此需要将resolve、reject的执行放到任务队列中。这里姑且先放到setTimeout中，保证异步执行（这并不严谨，为了保证promise属于微任务，很多promise库用了mutationObserver来模仿nextTick）。

const resolve = value => {
    if (value instanceof Promise) {
        return value.then(resolve, reject)
    }
    setTimeout(() => {
        if (this.status === 'pending') {
            this.value = value;
            this.status = 'fulfilled'
            this.onFullfilledFunc(this.value)
        }
    })
}
const reject = reason => {
    setTimeout(() => {
        if (this.status === 'pending') {
            this.reason = reason;
            this.status = 'rejected'
            this.onRejectedFunc(this.reason)
        }
    })
}
executor(resolve,reject)

这样一来，在执行到executor(resolve,reject)时，也能保证在nextTick中才执行Promise被决议后的任务，不会阻塞同步任务。同时，我们在resolve中加入了对value值是否为一个promise实例的判断语句。

Promise细节完善

在promise实例状态变更之前添加多个then方法：

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('data')
    }, 2000)
})
promise.then(data => {
    console.log(`1:${data}`)
})
promise.then(data => {
    console.log(`2:${data}`)
})

会输出：1：data 2：data

而我们的实现只会输出2：data，这是因为第二个then方法中的onFulfilledFunc会覆盖第一个then中的onFulfilledFunc。

只需要将所有then方法中的onFulfilledFunc储存到一个数组onFulfilledArray中，在当前Promise被决议时依次执行onFulfilledArray数组内的方法即可。（等同步代码执行完再去决议promise时）

function PromiseMock(executor) {
    this.status = 'pending';
    this.value = null;
    this.reason = null;
    this.onFullfilledArray = [];
    this.onRejectedArray = [];
    const resolve = value => {
        if (value instanceof Promise) {
            return value.then(resolve, reject)
        }
        setTimeout(() => {
            if (this.status === 'pending') {
                this.value = value;
                this.status = 'fulfilled'
                this.onFullfilledArray.forEach(func => {
                    func(value)
                })
            }
        })
    }
    const reject = reason => {
        setTimeout(() => {
            if (this.status === 'pending') {
                this.reason = reason;
                this.status = 'rejected'
                this.onRejectedArray.forEach(func => {
                    func(reason)
                })
            }
        })
    }
    executor(resolve,reject)
}
PromiseMock.prototype.then = function (onfulfilled, onrejected) {
    onfulfilled = typeof onfulfilled === 'function' ? onfulfilled : data => data
    onrejected = typeof onrejected === 'function' ? onrejected : error =>{ throw error }
    if(this.status === 'fulfilled') {
        onfulfilled(this.value)
    }
    if (this.status === 'rejected') {
        onrejected(this.reason)
    }
    if (this.status === 'pending') {
        this.onFullfilledArray.push(onfulfilled)
        this.onRejectedArray.push(onrejected)
    }
}

另外一个细节是，在构造函数中如果出错，将会自动触发Promise实例状态变为rejected。因此我们用try/catch块对executor进行包裹：

try {
    executor(resolve,reject)
} catch (e) {
    reject(e)
}

到目前为止，我们已经实现了基本的Promise。下面总结一下：

• Promise状态具有凝固性。
• Promise可以在then方法第二个参数中进行错误处理。
• Promise实例可以添加多个then处理场景。

Promise then的链式调用

一个Promise实例then方法的onfullfilled函数和onrejected函数是支持再次返回一个promise实例的，也支持返回一个非promise实例的普通值；并且，返回的这个promise实例或这个非promise实例的普通值将会传给下一个then方法的onfulfilled或onrejected函数，这样then方法就支持链式调用了。

初步实现

在前面实现的then方法中，我们可以创建一个新的promise实例，即promise2并最终将这个promise2返回：

PromiseMock.prototype.then = function (onfulfilled, onrejected) {
    onfulfilled = typeof onfulfilled === 'function' ? onfulfilled : data => data
    onrejected = typeof onrejected === 'function' ? onrejected : error =>{ throw error }
    // 将promise2作为then方法的返回值。
    let promise2
    if(this.status === 'fulfilled') {
        return promise2 = new PromiseMock((resolve, reject) => {
            setTimeout(() => {
                try {
                    //这个新的promise2 resolved的值为onfulfilled的执行结果
                    let result = onfulfilled(this.value)
                    resolve(result)
                }
                catch (e) {
                    reject(e)
                }
            })
        })
    }
}

当然，别忘了this.status === ‘rejected’状态和this.status === ‘pending’状态也要加入相同的逻辑：

    if (this.status === 'rejected') {
        return promise2 = new PromiseMock((resolve, reject) => {
            setTimeout(() => {
                try {
                    //这个新的promise2 reject的值为onrejected的执行结果
                    let result = onrejected(this.reason)
                    resolve(result)
                }
                catch (e) {
                    reject(e)
                }
            })
        })
    }
    if (this.status === 'pending') {
        return promise2 = new PromiseMock((resolve, reject) => {
            this.onFullfilledArray.push(() => {
                try {
                    let result = onfulfilled(this.value)
                    resolve(result)
                }
                catch (e) {
                    reject(e)
                }
            })
            this.onRejectedArray.push(() => {
                try {
                    let result = onrejected(this.reason)
                    resolve(result)
                }
                catch (e) {
                    reject(e)
                }
            })
        })
    }
}

这里要重点理解this.status === ‘pending’判断分支中的逻辑，当使用promise实例调用其then方法时，应该返回一个promise实例，返回的就是this.status === ‘pending’判断分支中返回的promise2。那么这个promise2什么时候被决议呢？应该是在异步处理结束后，依次执行onFullfilledArray或onRejectedArray数组中的函数时。里面的函数需要切换promise2的状态并进行决议。

完善实现

如果onfulfilled函数和onrejected函数返回一个普通值的情况，需要在之前实现的let result = onfulfilled(this.value)语句和let result = onrejected(this.reason)语句中，使变量result由一个普通值变为一个promise实例。为此我们抽象出resolvePromise方法进行统一处理。

const resolvePromise = (promise2, result, resolve, reject) => {}
PromiseMock.prototype.then = function (onfulfilled, onrejected) {
    // 将promise2作为then方法的返回值
    let promise2
    if(this.status === 'fulfilled') {
        return promise2 = new PromiseMock((resolve, reject) => {
            setTimeout(() => {
                try {
                    //这个新的promise2 resolved的值为onfulfilled的执行结果
                    let result = onfulfilled(this.value)
                    resolvePromise(promise2, result, resolve,reject)
                }
                catch (e) {
                    reject(e)
                }
            })
        })
    }
    if (this.status === 'rejected') {
        return promise2 = new PromiseMock((resolve, reject) => {
            setTimeout(() => {
                try {
                    //这个新的promise2 reject的值为onrejected的执行结果
                    let result = onrejected(this.value)
                    resolvePromise(promise2, result, resolve,reject)
                }
                catch (e) {
                    reject(e)
                }
            })
        })
    }
    if (this.status === 'pending') {
        return promise2 = new PromiseMock((resolve, reject) => {
            this.onFullfilledArray.push(() => {
                try {
                    let result = onfulfilled(this.value)
                    resolvePromise(promise2, result, resolve,reject)
                }
                catch (e) {
                    reject(e)
                }
            })
            this.onRejectedArray.push(() => {
                try {
                    let result = onrejected(this.value)
                    resolvePromise(promise2, result, resolve,reject)
                }
                catch (e) {
                    reject(e)
                }
            })
        })
    }
}