最近研究JavaScript裡的函式事件這些到底是如何呼叫的，查閱了好些資料，特別是國外一些大牛寫的文章，啟發非常的大，於是打算對這些知識進行梳理。

基本知識

• JS是什麼？
  
  • JS是單執行緒，非阻塞，非同步，併發的語言
  • JS有 呼叫棧，事件迴圈，回撥佇列，其它的APIs。
• JS 在執行時
  
  • JS在執行時（像V8引擎）有堆（記憶體分配）和棧（執行環境）， 但是他們沒有 setTimeout， DOC 等，這些是瀏覽器的web APIs。
• 我們知道的JS在瀏覽器裡有：
  
  • 執行時的V8（堆/棧）
  • 瀏覽器提供web APIs，比如DOM， ajax， 和setTimeout
  • 事件的回撥佇列，比如onClick, onLoad, onDone。
  • 事件迴圈
    
• JS的單執行緒（single thread）：僅僅是指JS程式碼執行在單執行緒裡面。
• 呼叫棧（call stack）:又稱執行環境（execution contexts）， 當函式或者程式呼叫的時候，就把該函式push到呼叫棧，結束時候，就從棧頂端移除。遵循FILO（先進後出）原則。注意：呼叫棧有個最大呼叫幀，chrome 瀏覽器最大支援16000個呼叫幀，超過後，會報“RangeError：Maximum call stack size exceeded”
• 堆（Heap）： 記憶體分配（memory allocation）的一塊空間。JS的引用型別的值是放在堆記憶體的。
• 回撥佇列（callback Queue）
  ：JS在執行時候，有一個列表用於記錄將要處理的回撥事件。遵循FIFO（先進先出）原則。
• 事件迴圈（event loop）: 事件迴圈不斷的輪詢檢測呼叫棧是否為空？如果不為空，就等待呼叫棧為空，否則就把回撥佇列列表裡的事件放到呼叫棧執行。迴圈直到回撥佇列列表為空。

同步函式呼叫棧機制

我們以一個例子來進行同步函式執行的機制， 有兩個函式foo，和bar，bar內部呼叫foo。

function foo(a, b) {
console.log("in foo");
return a * b;
}

function bar(y) {
var x = 10;
console.log("in bar"
 
);
return foo(x, y);
}

console.log(bar(5));

以上程式碼執行順序如下：

1. 最先進入console.log(bar(5)); 因此它被推送到呼叫棧。
2. console.log(bar(5));呼叫函式bar(5), 等待bar(5)的返回結果，於是把bar(5)推送到呼叫棧頂部。
3. 函式bar(5)裡有console.log("in bar"）;於是推送console.log("in bar"）;到棧頂。
4. console.log("in bar"）;執行完成返回，然後將console.log("in bar"）;從棧頂移除。
5. 接著執行return foo(x, y);，這是呼叫foo(x, y),把foo(x, y)推入到呼叫棧。
6. 執行console.log("in foo");推入棧頂，結束，移除棧。
7. 執行return a * b; 呼叫 a * b，推送a * b到棧頂，a * b執行完後，出棧。
8. 接著 return 10+5的結果返回給bar函式的foo(10, 5)，這樣foo(x,y)函式結束執行，foo(x,y)從呼叫棧移除。
9. 接著bar(y)函式return foo(10, 5)的值給bar(5)，這樣bar(5)執行結束，從呼叫棧中移除。
10. 最後console.log(bar(5));打印出15值，console.log呼叫完成，將console.log移除棧。這時呼叫棧就為空了，呼叫結束。
    執行順序請參考下圖：
    

非同步呼叫的事件迴圈機制

我們以setTimeout 為例， 有這樣程式碼，用兩個不同的timeout來闡述setTimeout的事件迴圈機制。

console.log("1");

setTimeout(function secondTimeout() {
    console.log("2");
}, 5000);

setTimeout(function firstTimeout() {
    console.log("3");
}, 0);
console.log("4.");

以上程式碼執行後列印順序是： 1, 4, 3, 2
以上程式碼執行機制如下：
1. 程式碼執行的console.log("1");將其push到呼叫棧，緊接著完成，從呼叫棧刪除

2. 接著呼叫setTimeout的secondTimeout，將其push到呼叫棧，由於setTimeout是web API，因此web API 處理secondTimeout這個事件，並從呼叫棧中移除，並且在web API中開始等待5秒。

3. 接著呼叫setTimeout的firstTimeout，將其push到呼叫棧，由於setTimeout是web API，因此web API 處理這個firstTimeout事件， 由於等待是0秒，於是將firstTimeout推送到回撥佇列，等待呼叫棧的執行（遵循先進先出原則）。這時事件迴圈（event loop）機制開始執行，檢查這時呼叫棧不為空？繼續排隊等待：把回撥佇列列表的第一個佇列推送到呼叫棧執行。由於此時，呼叫棧還要繼續執行console.log("4.");所以繼續等待呼叫棧結束。

4. 接著console.log("4.");列印完成，這時已經是到程式碼執行尾部，沒有主程式碼運行了，呼叫棧為空。事件迴圈機制檢查到呼叫棧為空後，將第一個在callback Queue裡的函式firstTimout() 推送到呼叫棧執行，並呼叫console.log(3)。結束後釋放呼叫棧。

5. 當此時呼叫棧為空時，event loop繼續將callback Queue例表裡的其他佇列一個一個push到呼叫棧去執行。如果此時回撥佇列例表裡有多個佇列排隊，那麼就安裝此迴圈，直到全部完成為止。

promise的事件迴圈機制

參考資料