JavaScript 的函式調用(Invocation)與堆疊(Stack)

名詞解釋

單執行續(Single thearded)

One command at a time.

JavaScript 是一個單執行續的程式語言。「單執行續」的意思是: 一次只能執行一個指令，一次只能處理一件事。

同步(Synchronous)

One at a time and execute in order.

程式碼會被逐行執行，一次只能處理一件事，在上一件事完成後才會開始執行下一個指令。

函式調用(Invocation)

Running a function.

函式(function)在被宣告的同時並不會被執行，在 JavaScript 裡我們用 () 來要求執行函式。而要求執行函式這個動作就叫做「調用」。

function a() {
  // some codes
}

a()  // 調用函式，要求函式執行。

什麼是堆疊(stack) ?

JavaScript 是一種單執行續的同步程式語言，它的特性就是一次只能處理一件事。

在 JavaScript 的世界中，stack 就像字面上的意思，是一個一個執行環境(Execution Context)的堆疊，是一個等待被執行的序列，它有著後進先出的特性。stack 就像只有一個開口的盒子，每個執行環境會被從開口放進去，每次只執行最上面的那個(單執行續)，執行完畢後再從最上面拿掉，然後才執行下一個(同步)。

// 範例
function a() {
  b()
  var c
}

function b() {
  var d
}

a()
var d

如上範例。當程式被啟動時，JavaScript 引擎會自動生成全域執行環境(Global Execution Context)丟進 stack 裡，接著開始逐行執行程式碼。

當執行到 a() 時，如同執行環境介紹文章中提到: 當函式被調用的時候，會馬上建立一個新的執行環境。這個執行環境建立好後會被丟進 stack 裡執行。在執行 a 函式時，發現 a 函式調用了 b 函式。這時候 a 函式的執行環境的處理會被暫停，同時建立一個 b 函式的執行環境並丟進 stack 裡執行。如下圖所示:

可以看到目前 stack 裡總共堆了三個執行環境等待被處理。其中，最上面的是 b 函式的執行環境，也就是說，目前正在被執行的是 b 函式裡面的程式碼。當 var d 完成後，b 函式裡面的程式碼全部執行完畢，他就會從 stack 裡被移除。b 函式的執行環境被移除後，stack 裡最上層就會變成 a 函式的執行環境，a 函式裡的程式碼就會接著被執行。 當 a 函式裡的 var c 也執行完後，a 函式的執行環境就會從 stack 中移除，並接著執行全域執行環境裡的剩餘程式碼。

參考資料

• Udemy - JavaScript: Understanding the Weird Parts

文章內容如有錯誤，歡迎留言討論！