箭頭函數如何處理 JavaScript 中的「this」關鍵字？

箭頭函數和 'this'

在 ES6 中，箭頭函數引入了一種新的方法定義方式。然而，在存取“this”關鍵字時，箭頭函數和傳統函數之間存在顯著差異。

問題：

考慮以下程式碼：

var person = {
  name: "jason",

  shout: () => console.log("my name is ", this.name)
}

person.shout() // Should print out my name is jason

雖然預期的結果是列印“我的名字是傑森”，但控制權台只輸出「我的名字是。」這是因為箭頭函數在「this」綁定方面與傳統函數的行為不同。

說明：

與傳統函數不同，箭頭函數不會綁定 ' this' 關鍵字到包含範圍。相反，它們從周圍的上下文繼承“this”綁定。上例中，箭頭函數中的「this」指的是全域對象，而不是「person」物件。

解：

有幾種解決此問題的方法：

1. 使用Bound函數：

// Bind 'this' to the 'person' object
var shoutBound = function() { console.log("my name is ", this.name); }.bind(person);

// Assign the bound function to the 'shout' property
person.shout = shoutBound;

2. 使用傳統函數：

// Define a traditional function with 'this' bound to 'person'
person.shout = function() { console.log("my name is ", this.name); };

3. 使用ES6方法宣告：

// ES6 method declaration implicitly binds 'this' to the object
person = {
  name: "jason",

  shout() {
    console.log("my name is ", this.name);
  }
};

透過了解箭頭函數關於'this' 綁定的不同行為，您可以在 ES6 中編寫有效且靈活的程式碼。

以上是箭頭函數如何處理 JavaScript 中的「this」關鍵字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！