與傳統函數相比，「this」關鍵字在 ES6 箭頭函數中的行為有何不同？

箭頭函數和這個

在 ES6 中，箭頭函數為定義函數提供了簡潔的語法。然而，它們的行為在如何處理 this 關鍵字方面與傳統函數不同。

考慮以下程式碼：

var person = {
  name: "jason",
  shout: () => console.log("my name is ", this.name) // Error: This is unbound
};

person.shout();

這裡，目的是在以下情況下記錄「我的名字是 jason」： person.shout() 被呼叫。但是，輸出是“我的名字未定義”。這是因為箭頭函數沒有自己的 this 綁定。相反，它們從封閉範圍繼承 this 值。

在這種情況下，封閉範圍是全域範圍，其中 this 指的是 window 物件。由於 window 物件沒有 name 屬性，因此 this.name 表達式的計算結果為未定義。

要解決此問題，您可以利用箭頭函數不綁定 this 的事實。透過將箭頭函數直接放置在物件字面量內，您可以從物件繼承正確的this 值：

var person = {
  name: "jason",
  shout: function() {
    console.log("my name is ", this.name)
  }
};

person.shout(); // Output: my name is jason

或者，您可以使用不帶function 關鍵字和: 語法的ES6 方法聲明：

var person = {
  name: "jason",
  shout() {
    console.log("my name is ", this.name)
  }
};

person.shout(); // Output: my name is jason

透過利用這些技術，您可以在箭頭函數中有效地使用它並實現所需的輸出。

以上是與傳統函數相比，「this」關鍵字在 ES6 箭頭函數中的行為有何不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！