Bagaimana untuk Menggunakan `$(this)` dengan betul dengan Pengendali Klik jQuery dan Fungsi Anak Panah ES6?

JQuery $(this) dan Fungsi Anak Panah ES6

Walaupun fungsi anak panah ES6 menawarkan leksikal pengikatan ini, ia boleh menimbulkan cabaran apabila digunakan dengan pengikatan klik jQuery. Apabila menggunakan fungsi anak panah dalam senario ini, $(this) berkelakuan berbeza, pada asasnya mencontohi tingkah laku penutupan ES5:

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

Untuk menangani isu ini, adalah penting untuk memahami bahawa Traceur tidak mempunyai keupayaan untuk mengabaikan $( ini) untuk pengikatan leksikal dalam konteks ini. ES6 menentukan tingkah laku fungsi anak panah, dan mereka sememangnya kekurangan akses kepada leksikal ini.

Penyelesaian terletak pada menggunakan event.currentTarget dan bukannya $(this):

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

jQuery menyediakan acara .currentTarget khusus untuk tujuan ini, kerana ia menyedari bahawa akses kepada leksikal ini tidak selalu boleh dilaksanakan dengan fungsi panggil balik. Dengan memanfaatkan event.currentTarget, elemen yang betul akan disasarkan, mengelakkan keperluan untuk mengubah suai pengikatan ini atau memperkenalkan pergantungan pada kod ES5.

Atas ialah kandungan terperinci Bagaimana untuk Menggunakan `$(this)` dengan betul dengan Pengendali Klik jQuery dan Fungsi Anak Panah ES6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!