ES6 事件循环机制

执行上下文（Execution Context）

JavaScript中的运行环境大概包括三种情况：

• 全局环境：JavaScript代码运行起来会首先进入该环境
• 函数环境：当函数被调用执行时，会进入当前函数中执行代码
• eval：存在安全问题（因为它可以执行传给它的任何字符串，所以永远不要传入字符串或者来历不明和不受信任源的参数）不建议使用，可忽略

每次当控制器转到可执行代码的时候，就会进入一个执行上下文。执行上下文可以理解为当前代码的执行环境，它会形成一个作用域。

函数调用栈(call stack)

因此在一个JavaScript程序中，必定会产生多个执行上下文，JavaScript引擎会以函数调用栈的方式来处理它们。栈底永远都是全局上下文，而栈顶就是当前正在执行的上下文。

var color = 'blue';

function changeColor() {
    var anotherColor = 'red';

    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }

    swapColors();
}
changeColor();

注意：函数中，遇到 return 能直接终止可执行代码的执行，因此会直接将当前上下文弹出栈。

全局上下文的生命周期，与程序的生命周期一致，只要程序运行不结束，比如关掉浏览器窗口，全局上下文就会一直存在。其他所有的上下文环境，都能直接访问全局上下文的属性。

解了这个过程之后，我们就可以对执行上下文做一些总结：

• 单线程
• 同步执行，只有栈顶的上下文处于执行中，其他上下文需要等待
• 全局上下文只有唯一的一个，它在浏览器关闭时出栈
• 函数的执行上下文的个数没有限制
• 每次某个函数被调用，就会有个新的执行上下文为其创建，即使是调用的自身函数

执行上下文生命周期

一个执行上下文的生命周期可以分为两个阶段：

• 创建阶段：在这个阶段中，执行上下文会分别创建变量对象，建立作用域链，以及确定this的指向。
  1. 创建变量对象：
     1. 建立arguments对象：检查当前上下文中的参数，建立该对象下的属性与属性值。
     2. 检查当前上下文的函数声明：在变量对象中以函数名建立一个属性，属性值为指向该函数所在内存地址的引用，如果函数名的属性已经存在，那么该属性将会被新的引用所覆盖。
     3. 检查当前上下文中的变量声明：每找到一个变量声明，在变量对象中以变量名建立一个属性，属性值为undefined，如果该变量名的属性已经存在，为了防止同名的函数被修改为undefined，则会直接跳过，原属性值不会被修改。
  2. 建立作用域链：作用域链，是由当前环境与上层环境的一系列变量对象组成，它保证了当前执行环境对符合访问权限的变量和函数的有序访问
  3. 确定this的指向：this的指向，是在函数被调用的时候确定的，在函数执行过程中，this一旦被确定，就不可更改了。如果调用者函数，被某一个对象所拥有，那么该函数在调用时，内部的this指向该对象。如果函数独立调用，那么该函数内部的this，则指向undefined。

• 代码执行阶段：创建完成之后，就会开始执行代码，这个时候，会完成变量赋值，函数引用，以及执行其他代码。

创建变量对象：

例子1：

function test() {
    console.log(a);
    console.log(foo());

    var a = 1;
    function foo() {
        return 2;
    }
}
test();

等价于

function test() {
    function foo() {
        return 2;
    }
    var a;
    console.log(a);
    console.log(foo());
    a = 1;
}

test();

例子2：

function test() {
    console.log(foo);
    console.log(bar);

    var foo = 'Hello';
    console.log(foo);
    var bar = function () {
        return 'world';
    }

    function foo() {
        return 'hello';
    }
}

test();

等价于

function test() {
    function foo() {
        return 'hello';
    }
    var bar;

    console.log(foo);
    console.log(bar);
    foo = 'Hello';
    console.log(foo);
    var bar = function () {
        return 'world';
    }
}

test();

未进入执行阶段之前，变量对象中的属性都不能访问。但是进入执行阶段之后，变量对象转变为了活动对象，里面的属性都能被访问了，然后开始进行执行阶段的操作。
变量对象和活动对象其实都是同一个对象，只是处于执行上下文的不同生命周期。不过只有处于函数调用栈栈顶的执行上下文中的变量对象，才会变成活动对象。
我们可以用创建变量对象来理解变量提升。

建立作用域链：
作用域链，是由当前环境与上层环境的一系列变量对象组成，它保证了当前执行环境对符合访问权限的变量和函数的有序访问。

var a = 20;

function test() {
    var b = a + 10;

    function innerTest() {
        var c = 10;
        return b + c;
    }

    return innerTest();
}

test();

确定this的指向：
this的指向，是在函数被调用的时候确定的，在函数执行过程中，this一旦被确定，就不可更改了。如果调用者函数，被某一个对象所拥有，那么该函数在调用时，内部的this指向该对象。如果函数独立调用，那么该函数内部的this，则指向undefined。

// demo01
var a = 20;
function fn() {
    console.log(this.a);
}
fn();

// demo02
var a = 20;
function fn() {
    function foo() {
        console.log(this.a);
    }
    foo();
}
fn();

// demo03
var a = 20;
var obj = {
    a: 10,
    c: this.a + 20,
    fn: function () {
        return this.a;
    }
}

console.log(obj.c);
console.log(obj.fn());

使用call，apply显示指定this

function fn() {
    console.log(this.a);
}
var obj = {
    a: 20
}

fn.call(obj);

call与applay后面的参数，都是向将要执行的函数传递参数。其中call以一个一个的形式传递，apply以数组的形式传递。这是他们唯一的不同。

function fn(num1, num2) {
    console.log(this.a + num1 + num2);
}
var obj = {
    a: 20
}

fn.call(obj, 100, 10); 
fn.apply(obj, [20, 10]); 

事件循环机制

JS 引擎建立在单线程事件循环的概念上。单线程（ Single-threaded ）意味着同一时刻只能执行一段代码，与 Swift、 Java 或 C++ 这种允许同时执行多段不同代码的多线程语言形成了反差。

JavaScript代码的执行过程中，除了依靠函数调用栈来搞定函数的执行顺序外，还依靠任务队列(task queue)来搞定另外一些代码的执行。

• 一个线程中，事件循环是唯一的，但是任务队列可以拥有多个。
• 任务队列又分为macro-task（宏任务）与micro-task（微任务），在最新标准中，它们被分别称为task与jobs。
• macro-task大概包括：script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。
• micro-task大概包括： process.nextTick, Promise, Object.observe(已废弃), MutationObserver(html5新特性)
• setTimeout/Promise等我们称之为任务源。而进入任务队列的是他们指定的具体执行任务。
• 来自不同任务源的任务会进入到不同的任务队列。
• 事件循环的顺序，决定了JavaScript代码的执行顺序。它从script(整体代码)开始第一次循环。之后全局上下文进入函数调用栈。直到调用栈清空(只剩全局)，然后执行所有的micro-task。当所有可执行的micro-task执行完毕之后。循环再次从macro-task开始，找到其中一个任务队列执行完毕，然后再执行所有的micro-task，这样一直循环下去。
• 其中每一个任务的执行，无论是macro-task还是micro-task，都是借助函数调用栈来完成。

例子1：

setTimeout(function() {
    console.log('timeout1');
})

new Promise(function(resolve) {
    console.log('promise1');
    for(var i = 0; i < 1000; i++) {
        i == 99 && resolve();
    }
    console.log('promise2');
}).then(function() {
    console.log('then1');
})

console.log('global1');

例子2：

// demo02
console.log('glob1');

setTimeout(function() {
    console.log('timeout1');
    process.nextTick(function() {
        console.log('timeout1_nextTick');
    })
    new Promise(function(resolve) {
        console.log('timeout1_promise');
        resolve();
    }).then(function() {
        console.log('timeout1_then')
    })
})

setImmediate(function() {
    console.log('immediate1');
    process.nextTick(function() {
        console.log('immediate1_nextTick');
    })
    new Promise(function(resolve) {
        console.log('immediate1_promise');
        resolve();
    }).then(function() {
        console.log('immediate1_then')
    })
})

process.nextTick(function() {
    console.log('glob1_nextTick');
})
new Promise(function(resolve) {
    console.log('glob1_promise');
    resolve();
}).then(function() {
    console.log('glob1_then')
})

setTimeout(function() {
    console.log('timeout2');
    process.nextTick(function() {
        console.log('timeout2_nextTick');
    })
    new Promise(function(resolve) {
        console.log('timeout2_promise');
        resolve();
    }).then(function() {
        console.log('timeout2_then')
    })
})

process.nextTick(function() {
    console.log('glob2_nextTick');
})
new Promise(function(resolve) {
    console.log('glob2_promise');
    resolve();
}).then(function() {
    console.log('glob2_then')
})

setImmediate(function() {
    console.log('immediate2');
    process.nextTick(function() {
        console.log('immediate2_nextTick');
    })
    new Promise(function(resolve) {
        console.log('immediate2_promise');
        resolve();
    }).then(function() {
        console.log('immediate2_then')
    })
})

80% 应聘者都不及格的 JS 面试题

Excuse me？这个前端面试在搞事！

https://yangbo5207.github.io/wutongluo/