箭頭函式（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）？

一般來說，總共有五中 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 如何參考？

一般來說，當一個傳統函式作為某物件的執行方法時，就會創建物件執行上下文。因此，在方法中使用 this，就會指向該物件本身。

然而，將箭頭函式使用在物件方法時，因為本身箭頭函式不會建立物件執行上下文，因為他本身並沒有 this。相反地，箭頭函式僅參考外層範疇（lexical Scope）環境中的 this、argument。除此之外，箭頭函式也沒有自己的建構函式。

換句話說，如果直接在全域中物件呼叫 {key: this}，該 this 會指向全域物件，因為此處的 this 仍然屬於全域執行上下文，因此 this 依然會顯示 window，或是嚴格模式下的 undefined。

因此，只要簡單瞭解：

箭頭函式本身並不會建立物件上下文，而是僅會參考外層環境（Lexical Scope）的 this，建立函式上下文而已。

---

瞭解 this 在 JavaScript 中扮演的角色

參考資料

• [教學] JavaScript this 的用法