Bagaimana untuk Menggunakan $(this) jQuery dengan Fungsi Anak Panah ES6 dalam Pengendali Acara?

Menggunakan jQuery $(this) dengan ES6 Arrow Functions (leksikal pengikatan ini)

Pengendali acara mengikat menggunakan fungsi anak panah ES6 boleh menjadi masalah apabila bekerja dengan pemilih $(this) jQuery. Ini kerana fungsi anak panah mengikat kata kunci ini secara leksikal, yang mungkin bukan gelagat yang diingini dalam panggilan balik jQuery.

Contoh berikut menggambarkan isu:

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

Dalam contoh di atas, menggunakan fungsi anak panah untuk pengendali acara klik menghasilkan $(this) merujuk contoh Permainan dan bukannya elemen yang diklik. Ini kerana fungsi anak panah tidak mempunyai pengikatan ini sendiri, jadi mereka mewarisinya daripada skop sekeliling.

Penyelesaian

Untuk menyelesaikan isu ini, elakkan menggunakan fungsi anak panah apabila mengikat pengendali acara jQuery. Sebaliknya, gunakan pengisytiharan fungsi tradisional atau ikat kata kunci ini secara eksplisit menggunakan kaedah bind:

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

Sebagai alternatif, anda boleh mengakses elemen yang diklik menggunakan event.currentTarget:

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

Menggunakan acara .currentTarget menyediakan akses kepada elemen yang mencetuskan acara, tanpa mengira konteks mengikat panggilan balik fungsi.

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