JS學習筆記#18 | Javascript 的執行環境 (Execution context)

undefined on Tenor

什麼是執行環境（Execution Context）？

簡單來說，執行環境是 JavaScript 程式碼執行時所在的「環境」。

它決定了程式碼如何被解析和執行，並管理變數、函數以及作用域（scope）的存取。

每當程式碼執行時，JavaScript 引擎會建立一個執行環境。

執行環境的類型

1.全域執行環境（Global Execution Context）

• 程式開始時建立，是最外層的執行環境。
• 創建一個全域物件。
• • 在瀏覽器中是 window object
  • 在 Node.js 中是 global object
• 全域變數和函數會被綁定到這個環境。
• 只有一個全域執行環境。

2. 函數執行環境（Function Execution Context）

• 每次呼叫函數時都會創建一個新的執行環境。
• 創建啟動物件，其中包含arguments 物件
• • 每個函數呼叫都會生成一個新的啟動物件
  • arguments 物件用來處理傳入的參數。
• 每個函數有自己的獨立環境，包含自己的變數和參數。
• 當函數執行完畢，這個環境通常會被銷毀（除非有閉包）。

執行環境的生命週期

1.創建階段（Creation Phase）

• 初始化變數物件（變數和函數宣告被提升，變數預設為 undefined）。
• 建立作用域鏈（Scope Chain）。
• 確定 this 的值。

2.執行階段（Execution Phase）

• 程式碼逐行執行。
• 變數被賦值，函數被呼叫。

3.銷毀階段（Destruction Phase）

• 執行完畢後，環境被移除（除非被閉包引用）。

範例

var globalVar = "我是全域的";

function outer() {
    var outerVar = "我是外層的";
    function inner() {
        var innerVar = "我是內層的";
        console.log(innerVar);  // 我是內層的
        console.log(outerVar);  // 我是外層的
        console.log(globalVar); // 我是全域的
    }
    inner();
}

outer();

執行過程：

1. 建立全域執行環境，包含 globalVar 和 outer。
2. 呼叫 outer()，建立 outer 的執行環境，包含 outerVar 和 inner。
3. 呼叫 inner()，建立 inner 的執行環境，包含 innerVar。
4. inner 的作用域鏈讓它能存取外層和全域變數。
5. 每個環境執行完後依序銷毀。