箭頭函式（Arrow function）的 this 究竟是什麼？如何簡單理解 Lexical "this"？

傳統的 this 定義

const person = {
  name: 'Chris',
  greet: function() {
    setTimeout(function() {
      console.log(`Hello, my name is ${this.name}`);
    }, 1000);
  }
};
person.greet(); // Hello, my name is undefined (after 1 second)

const person = {
  name: 'Chris',
  greet: function() {
    setTimeout(function() {
    console.log(`Hello, my name is ${this.name}`);
    }.apply(this), 1000);
  }
};
person.greet(); // Hello, my name is Chris (after 1 second)

箭頭函式中的 lexcial this 定義

箭頭函式的 this 指的是定義該 function 的環境（lexical Scope）中，所使用的 this。

const person = {
  name: 'Chris',
  greet: function() {
    setTimeout(() => {
    console.log(`Hello, my name is ${this.name}`);
    }, 1000);
  }
};

person.greet(); // Hello, my name is Chris

如何理解執行上下文（Execution Context）？

1. 全域執行上下文（Global Execution Context）：全域執行上下文是在程式開始執行時創建的，代表整個程式的執行環境。在全域執行上下文中，會創建全域物件（global object）和全域範疇（global scope）。
2. 函式執行上下文（Function Execution Context）：每當函式被呼叫時，都會創建一個新的函式執行上下文。每個函式執行上下文都有自己的範疇，包含函式內部的變數、參數、函式內部定義的其他函式等。
3. Eval 函式執行上下文（Eval Function Execution Context）：當程式碼被 eval() 函式執行時，會創建一個 Eval 函式執行上下文。Eval 函式執行上下文允許執行字串中的程式碼，但在現代 JavaScript 中，建議盡量避免使用 eval() 函式。
4. 模組執行上下文（Module Execution Context）：在使用 ES6 模組的情況下，每個模組都會有自己的模組執行上下文，模組內的變數、函式等僅在模組內可見，預設不會暴露到全域範疇。
5. 物件執行上下文（Object Execution Context）：當函式作為物件的方法被呼叫時，該函式執行上下文被稱為物件執行上下文。在物件執行上下文中，物件本身被設置為 this，並且可以訪問該物件的屬性和方法。

箭頭函式的 this 如何參考？

瞭解 this 在 JavaScript 中扮演的角色

參考資料

• [教學] JavaScript this 的用法