ホームページ >ウェブフロントエンド >jsチュートリアル >イベント ハンドラーで ES6 アロー関数で jQuery の $(this) を正しく使用する方法は?
ES6 アロー関数で jQuery $(this) を使用する (字句 this バインディング)
ES6 アロー関数を使用してイベント ハンドラーをバインドすると、次のような場合に問題が発生する可能性があります。 jQuery の $(this) セレクターを操作します。これは、アロー関数が this キーワードを字句的にバインドするためであり、これは jQuery コールバックで望ましい動作ではない可能性があります。
次の例は、この問題を示しています。
class Game { foo() { this._pads.on('click', () => { if (this.go) { $(this).addClass('active'); } }); } }
上記の例では、クリック イベント ハンドラーのアロー関数の結果、$(this) はクリックされた要素の代わりに Game インスタンスを参照します。これは、アロー関数が独自の this バインディングを持たないため、周囲のスコープからバインディングを継承するためです。
解決策
この問題を解決するには、アロー関数の使用を避けてください。 jQueryイベントハンドラーをバインドするとき。代わりに、従来の関数宣言を使用するか、bind メソッドを使用して this キーワードを明示的にバインドします:
class Game { foo() { this._pads.on('click', function() { if (this.go) { $(this).addClass('active'); } }.bind(this)); } }
または、event.currentTarget:
class Game { foo() { this._pads.on('click', (event) => { if (this.go) { $(event.currentTarget).addClass('active'); } }); } }
Using event を使用してクリックされた要素にアクセスできます。 .currentTarget は、コールバック関数のバインディング コンテキストに関係なく、イベントをトリガーした要素へのアクセスを提供します。
以上がイベント ハンドラーで ES6 アロー関数で jQuery の $(this) を正しく使用する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。