Mengapa `$(this)` Gagal dalam Pengendali Klik jQuery dengan Fungsi Anak Panah ES6?

Fungsi Anak Panah ES6 dan jQuery $(this): Kekeliruan Mengikat

Fungsi anak panah ES6 menyediakan kod penjilidan ini secara leksikal dengan menghapuskan keperluan untuk panggilan bind() eksplisit. Walau bagaimanapun, apabila digunakan dengan pengikatan klik jQuery, tingkah laku ini boleh menyebabkan masalah.

Gelagat Tidak Dijangka dengan Fungsi Anak Panah:

Pertimbangkan kod berikut:

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

Dengan menggunakan fungsi anak panah sebaliknya:

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

The Rujukan $(this) ditukar kepada penutupan gaya ES5 (self = this).

Memahami Ikatan Fungsi Anak Panah ES6:

Tingkah laku ini wujud pada anak panah ES6 fungsi, dan bukan masalah dengan terjemahan Traceur. Fungsi anak panah sentiasa mengikat ini secara leksikal dengan konteks yang disertakan. Dalam kes ini, kaedah foo().

Penyelesaian Menggunakan event.currentTarget:

Untuk menyelesaikan isu, gunakan event.currentTarget dan bukannya $(this) untuk akses elemen yang diklik dalam panggilan balik fungsi anak panah:

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

jQuery menyediakan secara khusus event.currentTarget untuk menampung situasi di mana fungsi panggil balik mungkin tidak mempunyai akses kepada konteks ini yang betul.

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