當 JS 引擎執行程式碼(script)時，會創建 execution contexts(執行環境)

JavaScript 共會建立兩種執行環境：

• 全域執行環境 Global Execution Context (GEC)
• 函式執行環境 Function Execution Context (FEC)

每種 execution context 都包含兩個階段：

• 創造階段 creation phase
• 執行階段 execution phase

全域執行環境 Global Execution Context

當初次執行一份 JavaScript 程式碼時， JS 引擎會創造第一種 execution context，叫 Global Execution Context

在 Global Execution Context 內部

• 先進入 creation phase：

  1. 創建全域物件 global object (例如，瀏覽器中的 window object，或 Node.js 中的 global object)

     console.log(window);  // -> window(object)
     

     明明沒有去定義 window 變數，window 他指向 window object 是怎麼來的?

     -> 在瀏覽器

     初次執行程式碼時， JS 引擎會創造 Global Execution Context ，在 Global Execution Context 內部，會去創建 window object 來當作他的 global object

     -> 在visual studio code

     會出現ReferenceError：window is not defined，因為沒有瀏覽器、視窗，就不會創建一個window object

  2. 建立 scope (變數所參考的值)

  3. 創建 this 關鍵字，並被綁定至 global object

     console.log(this);  
     // 瀏覽器 -> window(object)
     // visual studio code -> {} (empty object)
     

  4. 將 variables 、class 和 function 分配至記憶體RAM (hoisting 步驟)

• creation phase結束後，會進入execution phase：

  1. 逐行( line by line )執行程式碼
  2. 遇到遞迴時，則使用call stack來排定工作順序

let a = 3;

let result = area(a);
console.log(result);

function area(s) {
  return s * s;
}

// 1. creation phase創造階段
// 1.1 global object 製作完成 -> 這樣window.alert()有定義，才有意義，之後在有辦法在執行程式碼時執行window.alert()
// 1.2 建立 scope
// 1.3 this keyword
// 1.4 hoisting，a undefined, result undefined, area is a function，放進記憶體
//     (這邊已經先存好function內容了，因此可以在定義function前，先在前面使用function)

// 2. execution phase執行階段
// a = 3
// 執行area function，把a套進去
// result = 9
// console.log(result);

函式執行環境 Function Execution Context

每次的 function call ，JS引擎也都會創造一個Function Execution Context

一樣也有 creation phase 以及 execution phase，但差別在於，函式執行環境不創建global object，而是創建argument object

Argument object包含了被放入此函式的parameters的數值參照值(a reference to all the parameters passed into the function)

• 函式執行環境的creation phase是：

  1. 創建argument object
  2. 建立 scope (依照 closure 這個準則)
  3. 創建 this 關鍵字(注意 this關鍵字指的是 window object 或 object method中的object)
  4. 將 variables 、class 和 function 分配至記憶體RAM(hoisting步驟)

• creation phase結束後，會進入execution phase：

  1. 逐行( line by line )執行程式碼
  2. 遇到遞迴時，則使用call stack來排定工作順序

let a = 3;

let result = area(a);
console.log(result);

function area(s) {
  return s * s;
}

// Global Execution Context執行到let result = area(a)這行的area(a)時
// 馬上要執行下面的function area(s)，會馬上進入Function Execution Context
// 1. creation phase創造階段
// 1.1 argument object -> s = 3
// 1.2 建立 scope
// 1.3 this keyword(指向window object)
// 1.4 hoisting (X，裡面沒function了)

// 2. execution phase執行階段
// s * s
// return

下一篇文章學習進階的提升。