調(diào)用堆棧

眾所周知JavaScript是單線程編程語言，它只有一個(gè)單一的調(diào)用堆棧，當(dāng)調(diào)用堆棧由函數(shù)在運(yùn)行，它就不能做其他任何事。調(diào)用堆棧是一個(gè)可以記錄當(dāng)前執(zhí)行程序所在位置的數(shù)據(jù)結(jié)構(gòu)，調(diào)用堆棧中的每個(gè)部分稱為堆棧幀。比如下列代碼：

var end = () => {
  throw new Error('There is a Error!');
}
var second = () => {
  end();
}
var start = () => {
  second();
}
start();

在chrome中執(zhí)行就會(huì)產(chǎn)生以下拋出的異常堆棧跟蹤，這也正是異常發(fā)生時(shí)的調(diào)用堆棧狀態(tài)：

如果在chrome中執(zhí)行一個(gè)遞歸調(diào)用自身而且沒有任何終止條件的函數(shù)，會(huì)導(dǎo)致調(diào)用堆棧中的函數(shù)調(diào)用超過了調(diào)用堆棧的實(shí)際大小，瀏覽器會(huì)拋出一個(gè)錯(cuò)誤：

由于JavaScript單一調(diào)用堆棧的特效，導(dǎo)致了當(dāng)在調(diào)用堆棧中進(jìn)行的函數(shù)需要大量時(shí)間才能處理時(shí)，瀏覽器會(huì)處于等待狀態(tài)，不會(huì)運(yùn)行其他代碼，甚至可能會(huì)停止響應(yīng)，那么要如何解決呢？

事件循環(huán)

解決方案就是異步回調(diào)。
這里就要先介紹一下事件循環(huán)
雖然JavaScript有很多允許異步的代碼（如setTimeout，AJAX等），但是JavaScript引擎只會(huì)在同一時(shí)刻執(zhí)行一個(gè)程序。JavaScript引擎運(yùn)行在一個(gè)宿主環(huán)境中（通常是瀏覽器或者node），宿主環(huán)境中有一個(gè)事件循環(huán)的內(nèi)置機(jī)制，會(huì)根據(jù)時(shí)間順序去調(diào)用js引擎去執(zhí)行程序。

事件循環(huán)的任務(wù)只有一個(gè)，就是去監(jiān)控調(diào)用棧和回調(diào)隊(duì)列，當(dāng)調(diào)用棧為空時(shí)，它會(huì)將取出隊(duì)列中的第一個(gè)事件，放入到調(diào)用棧中執(zhí)行。這樣的迭代在事件循環(huán)中被稱為一個(gè)tick。
在chrome中運(yùn)行下面的代碼：

console.log('first!');
setTimeout(() => console.log('second!'), 500);
console.log('third!');

會(huì)出現(xiàn)如下結(jié)果：

這就是一個(gè)典型的異步回調(diào)！
當(dāng)調(diào)用棧按順序執(zhí)行到setTimeout()函數(shù)時(shí)，它會(huì)將其移出調(diào)用棧，但也不會(huì)直接放入隊(duì)列中，而是設(shè)置一個(gè)定時(shí)器，待定時(shí)器過期以后，宿主環(huán)境才會(huì)將回調(diào)放入隊(duì)列中，當(dāng)調(diào)用棧清空時(shí)，就會(huì)從隊(duì)列中取出并這個(gè)回調(diào)。
以上的這種回調(diào)容易造成回調(diào)地獄，所以ES6中又提出Promise函數(shù),還有ES8中的async/await函數(shù)，來優(yōu)化異步模式。