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 能直接终止可执行代码的执行，因此会直接将当前上下文弹出栈。

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

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

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

事件循环其实跟运行环境有关，js运行环境又称宿主环境

    JS的输出顺序和宿主环境中的执行栈有关，执行栈是一个数据节后，叫做call stack,存放各种函数的执行环境，每一个函数执行之前，会创建执行环境，然后加入到执行占中，函数调用完后才能后，会销毁执行栈。

    函数的相关信息（AO）会加入执行栈中,因为数据结构时栈结构，所以数据存放和取出遵循先进后出的原则，js引擎永远执行栈顶的内容

    JS是一个单线程异步的承租，在异步中除了我们自己手动设置的异步程序以外，js还存在一些本身就是异步的函数，这种函数被称为异步函数：函数不会立即执行，而是需要等到某些时刻才会执行

    1. js主线程：负责执行执行栈的栈顶代码

    2. GUI线程

    3. 事件监听线程 ： 负责所有事件监听

    4. 计时线程：负责定时器

    5. 网络线程：负责各种网络请求

    如果四条线程发现自己负责的部分发生了一些程序，则该线程会把该程序加入至事件队列中，如果当js引擎发现执行栈中没有任何内容（同步代码）则会把事件队列中触发了的汗水放进执行栈中执行

    js引擎对事件队列取出执行的方式以及与宿主环境配合的过程诚挚为事件循环

    事件队列中分为两种：宏队列和微队列，微队列会被优先放入执行栈中执行

    1.宏任务： 计时器，事件回调函数，http回调

    2.微任务： promise , MutarionObserver

    当执行栈清空时，js引擎会首先将微任务依次执行，如果没有微任务则执行宏任务

事件循环机制：

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，都是借助函数调用栈来完成。

 举例一：

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');

举例二：

// 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')
    })
})