JavaScript异步编程的原理

1 想说的话

JavaScript异步编程是前端面试中一个重要内容。为了加深我对此部分内容的印象，故写此博客，主要介绍JS异步编程的运行原理。

• pre

  栈
  
  队列
  

2 正文

本文主要是阐述下面这张图的内容。一图胜千言啊。

和C语言类似，JS也有执行栈（execution stack）。执行栈内存储执行上下文（execution context），execution context也被译作执行环境。执行环境一般分为全局环境和函数执行环境。

过程如下：

1 在执行栈中，上面执行环境的代码先执行，执行环境的代码执行完后，该执行环境从执行栈中弹出。

2 执行环境执行代码遇到异步代码块时，会通知JS宿主环境线程。

3 当事件触发时，将一个事件消息推入消息队列。（队列是先进先出。）注意：这时候不是立即执行，要等到当前Event Loop（事件循环）的代码执行完。（一次事件循环流转一次，被称为一次tick。）

这个必须搞清楚，以下面代码为例：

var index;
for (index = 0; index < 5; index++) {
    setTimeout(() => {
        console.log(index)
    }, 0)
}

结果是：

我们可以看到，即使定时器时间为0，定时器的回调函数也等到循环结束才会执行，那时候index等于5，所以打印5个5。

4 当前tick中的代码完后，消息队列会出对一个消息。现在执行栈的线程的状态是空闲的，所以出队的消息被该线程拉取。然后，事件消息绑定的回调函数（也就是异步任务）会像同步任务一样被推入执行栈。

5 继续过程1-4，直到消息队列为空。当然JS宿主环境线程是一直在跑的，因为要监听用户的触发事件的行文。

3 小结

以上就是JS异步编程的运行原理。

JS异步编程的实现主要有3种方式：回调函数，订阅发布模式，ES6的Promise。读者可以自行学习。

本文的图来自于：JavaScript异步编程,这篇作者的博客有异步编程的详细内容。

我自己也画了张图，以此加深印象。