調用棧(Call Stack)


調用棧(call stack)

因為 JavaScript 屬於「單執行緒 (single threaded)」語言,也就是一次只能做一件事,當同時有很多個函式時,會依照「後進先出」的堆疊(stack)方式,逐一執行。

舉例來說,下圖的程式碼共有三個函式,「first()」內包有「second()」函式、「second()」函式內又包有「third()」函式。

這些函式依照調用棧的規則,會如下運行,堆疊概念可參考右側「Call Stack」圖示:

  1. 第一步執行最外圈的「first()」函式:
  2. 在「first()」函式中最先遇到的是第 2 行的「console.log(“first function begins”);」,因此會先顯示這行程式碼,執行完後即移出調用棧:
  3. 讀取到「second()」的程式碼:
  4. 在「second()」函式中最先遇到的是第 5 行「console.log(“second function begins”);」,顯示結果如下:
  5. 讀取到「third()」的程式碼,雖然函式宣告寫在下面,但因為「third()」的函式宣告在「second()」的函式執行環境中會被提升(hoisted),因此一樣可以讀取:
  6. 在「third()」函式中最先遇到的是第 9 行「console.log(“third function begins”);」,顯示結果如下:
  7. 跑完「console.log(“third function begins”);」,下一行遇到的是「console.log(“third function ends”);」:
  8. 「third()」函式內容全部執行完畢,移出調用棧,回到「second()」函式尚未執行的內容,顯示第 13 行「console.log(“second function ends”);」:
  9. 「second()」函式內容全部執行完畢,移出調用棧,回到「first()」函式尚未執行的內容,顯示第 16 行的「console.log(“first function ends”);」:
  10. 全部的函式都執行完畢,調用棧清空:

堆棧溢出(stack overflow)

如果出現遞迴(即函式自我呼叫)又未設終止條件,則會產生「堆棧溢出(stack overflow)」,代表函式無限制持續運行,記憶體根本裝不下、直接溢出。

#javascript #調用棧







你可能感興趣的文章

[ 前端工具 ] - gulp, Babel, SCSS, uglyfy

[ 前端工具 ] - gulp, Babel, SCSS, uglyfy

OOP 10 - 回顧抽象、封裝、繼承、多型

OOP 10 - 回顧抽象、封裝、繼承、多型

名稱加密

名稱加密






留言討論