首頁 >web前端 >js教程 >JavaScript 中箭頭函數和常規函數的「this」關鍵字有何不同?

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

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-12-10 02:14:13639瀏覽

How Does the

箭頭函數和無上下文的「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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn