JavaScript 中箭頭函數和常規函數的「this」關鍵字有何不同？

箭頭函數和無上下文的「This」

在 ES6 中，箭頭函數為函數宣告提供了簡潔的語法。然而，箭頭函數和傳統函數之間的一個關鍵區別是它們對「this」關鍵字的處理。

當您在物件內部使用箭頭函數時，如給定程式碼所示：

var person = {
  name: "jason",

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

箭頭函數中的「this」關鍵字並不會引用「person」物件。相反，它指向建立箭頭函數的作用域，在本例中是全域作用域。因此，當呼叫“person.shout()”時，它會記錄“我的名字是”，而沒有“jason”屬性。

要解決此問題，您可以使用常規函數語法而不是箭頭函數：

var person = {
  name: "jason",

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

在常規函數中，「this」指的是擁有該函數的物件。因此，它在呼叫時會正確輸出“my name is jason”。

或者，您可以利用ES6 方法聲明語法，它類似於箭頭函數語法：

var person = {
  name: "jason",

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

使用這種語法，函數聲明省略了冒號（:）和「function」關鍵字。但是，它仍然使用常規函數聲明語法，確保“this”綁定到物件。

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