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 の Arrow 関数バインディングについて:

この動作は ES6 のアロー関数に固有のものであり、Traceur の翻訳の問題ではありません。アロー関数は常に、これを周囲のコンテキストに字句的にバインドします。この場合、 foo() メソッドです。

event.currentTarget を使用した解決策:

問題を解決するには、$(this) の代わりにevent.currentTarget を利用して、アロー関数コールバック内でクリックされた要素にアクセスします:

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

jQuery は特に、event.currentTarget を提供します。コールバック関数が正しい this コンテキストにアクセスできない状況に対応します。

以上がES6 アロー関数を使用した jQuery クリック ハンドラーで `$(this)` が失敗するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。