為什麼使用 ES6 箭頭函數的 jQuery 點選處理程序中的 `$(this)` 會失敗？

ES6 箭頭函數和jQuery $(this)：綁定混亂

ES6 箭頭函數提供詞法this 綁定，透過消除需要來簡化程式碼用於顯式的bind()呼叫。但是，當與 jQuery 的單擊綁定一起使用時，此行為可能會導致問題。

箭頭函數的意外行為：

考慮以下程式碼：

class Game {
  foo() {
    this._pads.on('click', function() {
      if (this.go) { $(this).addClass('active'); }
    });
  }
}

使用箭頭函數取代：

class Game {
  foo() {
    this._pads.on('click', () => {
      if (this.go) { $(this).addClass('active'); }
    });
  }
}

使用箭頭函數取代：

$(this) 引用轉換為ES5 風格的閉包（self = this）。

理解 ES6 箭頭函數綁定：

此行為是 ES6 箭頭固有的函數，而不是 Traceur 翻譯的問題。箭頭函數總是在詞法上將 this 綁定到封閉的上下文。在本例中，為 foo() 方法。

class Game {
  foo(){
    this._pads.on('click', (event) => {
      if(this.go) {
        $(event.currentTarget).addClass('active');
      }
    });
  }
}

使用event.currentTarget 的解決方案：

要解決此問題，請使用event.currentTarget 而不是$(this)在箭頭函數回呼中存取被點擊的元素：jQuery 特別提供了event.currentTarget來適應情況其中回呼函數可能無法存取正確的 this 上下文。

以上是為什麼使用 ES6 箭頭函數的 jQuery 點選處理程序中的 `$(this)` 會失敗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！