JavaScript 的工作原理：了解執行情境（針對初學者的簡化版）

JavaScript 是世界上最受歡迎的程式語言之一。但它在幕後是如何運作的呢？讓我們使用簡單的概念和偽代碼逐步分解它，以便任何初學者都能理解。

什麼是 JavaScript？

JavaScript 是一種在瀏覽器（如 Chrome、Firefox 或 Safari）或伺服器上（使用 Node.js 等工具）運行的程式語言。它用於使網站具有互動性。當您在瀏覽器中看到動畫、按鈕或遊戲時，JavaScript 正在發揮作用。

要了解 JavaScript 的工作原理，我們需要了解兩件事：

1. 執行上下文
2. 呼叫堆疊

什麼是執行上下文？

執行上下文就像一個盒子，JavaScript 保存執行程式碼所需的一切。這包括：

1. 變數（您儲存的數據，例如 x = 5）
2. 函數（執行某些操作的程式碼片段，例如 showMessage()）
3. 要執行的程式碼（您所寫的實際指令）

執行上下文主要有兩種：

1. 全域執行上下文（GEC）：這是 JavaScript 開始執行程式碼的預設框。就像主舞台一樣。
2. 函數執行上下文（FEC）：這是每當呼叫函數時建立的新框。它僅適用於該功能。

逐步範例

想像你寫了這個簡單的偽代碼：

// Global Code
var name = "Alex";
function greet() {
    var message = "Hello, " + name;
    return message;
}
greet();

以下是 JavaScript 的逐步執行程序：

1.建立全域執行上下文

程式啟動時，JavaScript 會自動建立一個全域執行上下文（GEC）。

• 記憶體（可變環境）：

  • name = undefined（暫時佔位符）
  • greet = 函數定義（儲存greet()的程式碼）

• 程式碼執行階段：

  • 它逐行運行全域程式碼：
  • var name = "亞歷克斯"; → 更新記憶體：name =“Alex”
  • 遇到greet(); → 呼叫greet函數。

2.建立函數執行上下文

當呼叫greet()時，JavaScript會專門為greet建立一個新的函數執行上下文(FEC)。

• 記憶體（可變環境）：

  • message = undefined（greet 中變數的佔位符）

• 程式碼執行階段：

  • 執行問候函數：
  • var message =「你好，」名字； → 將「Hello,」與姓名（「Alex」）組合，因此訊息 =「Hello, Alex」。
  • 回訊息； → 回覆「你好，亞歷克斯」。

3.清理並返回

greet 函數完成後，其 函數執行上下文 就會被移除（刪除）。程式返回全域執行上下文。

執行上下文會發生什麼事？

JavaScript 使用呼叫堆疊來追蹤所有這些執行上下文。

什麼是呼叫堆疊？

呼叫堆疊就像一堆盤子：

1. 全域執行上下文位於底部（第一塊板）。
2. 每次呼叫函數時，都會在頂部新增一個函數執行上下文（一個新板）。
3. 函數完成後，其上下文將被刪除（板被取下）。

用偽代碼視覺化

以下是 JavaScript 處理我們程式碼的方式：

1. 初始全域程式碼（建立 GEC）：
   

   // Global Code
   var name = "Alex";
   function greet() {
       var message = "Hello, " + name;
       return message;
   }
   greet();
   

   登入後複製

   登入後複製

2. 全域執行更新（運行程式碼）：
   

   GEC:
     Memory: { name: undefined, greet: function }
     Code: Execute global lines
   

   登入後複製

3. 呼叫greet()（建立FEC）：
   

   GEC:
     Memory: { name: "Alex", greet: function }
     Code: Encounters greet()
   

   登入後複製

4. 運行greet()並回傳：
   

   Call Stack:
     1. GEC
     2. FEC for greet()
   FEC (greet):
     Memory: { message: undefined }
     Code: Execute function lines
   

   登入後複製

5. 完成執行：
   

   FEC (greet):
     Memory: { message: "Hello, Alex" }
     Return value: "Hello, Alex"
   Call Stack after return:
     1. GEC
   

   登入後複製

要記住的關鍵事項

1. 執行上下文就像 JavaScript 運行程式碼的容器。每個程式都以全域執行上下文開始，每個函數都有自己的函數執行上下文。
2. 呼叫堆疊追蹤正在運行的內容。最後新增的內容是第一個刪除的內容（LIFO：後進先出）。
3. 當函數完成時，JavaScript 會進行清理。這就是為什麼函數的記憶體不會永遠保留的原因。

為什麼這很重要？

理解執行上下文可以幫助您編寫更好的程式：

• 您將知道為什麼變數在某些地方可用而在其他地方（範圍）不可用。
• 您將理解諸如「未定義」變數之類的錯誤。
• 您將了解函數如何互動以及它們傳回值的原因。

挑戰自己

嘗試在腦海中運行這個偽代碼：

Call Stack:
  Empty (Program Ends)

問自己：

1. 全域執行上下文中有什麼？
2. 呼叫multiply() 時會發生什麼事？
3. 結果的最終值是多少？

透過掌握執行上下文，您將為解決最棘手的 JavaScript 問題奠定堅實的基礎！

以上是JavaScript 的工作原理：了解執行情境（針對初學者的簡化版）的詳細內容。更多資訊請關注PHP中文網其他相關文章！