箭頭函數和this

這個 foo.baz() 的結果是什麼？ ？

const foo = {
  bar: 10,
  baz: () => console.log(this.bar),
};


foo.baz();

這個函數看起來應該可以工作，但是如果你運行它，結果將是「未定義」。為什麼會這樣呢？
在JavaScript 中，當你使用箭頭函數時，函數console.log(this.bar) 會尋找全域變量，因為「this」關鍵字不會綁定到周圍的對象，而是綁定到瀏覽器或瀏覽器中的全域物件（視窗）。 Node.js 環境。
為了解決這個問題，我們要麼使用 foo.bar 要麼稍微改變一下程式碼並使用正規函數表達式，如下所示

 baz: function () {
    console.log(this.bar);
  },

或者，如果我們必須使用箭頭函數，我們可以使用物件名稱並像這樣呼叫 foo.bar，而不是呼叫局部變數 this.bar 。

 baz: () => console.log(foo.bar),

現在輸出將正確為 10。

以上是箭頭函數和this的詳細內容。更多資訊請關注PHP中文網其他相關文章！