es6 队列_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的指向。

创建变量对象：

建立arguments对象：检查当前上下文中的参数，建立该对象下的属性与属性值。

检查当前上下文的函数声明：在变量对象中以函数名建立一个属性，属性值为指向该函数所在内存地址的引用，如果函数名的属性已经存在，那么该属性将会被新的引用所覆盖。

检查当前上下文中的变量声明：每找到一个变量声明，在变量对象中以变量名建立一个属性，属性值为undefined，如果该变量名的属性已经存在，为了防止同名的函数被修改为undefined，则会直接跳过，原属性值不会被修改。

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

确定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')

})

})