Mengapakah \"ini\" Berkelakuan Tidak Dijangka dalam Pengendali Acara JavaScript?

Ambiguous "this" dalam Event Handlers

Apabila bekerja dengan JavaScript, adalah perkara biasa untuk mencipta pengendali acara menggunakan kaedah addEventListener. Walau bagaimanapun, tingkah laku pelik timbul apabila cuba mengakses sifat objek dalam pengendali ini: "ini" tidak merujuk kepada objek tetapi sebaliknya kepada elemen yang mencetuskan peristiwa.

Senario Masalah

Pertimbangkan kod berikut, yang menunjukkan isu ini:

function ticketTable(ticks) {
  this.tickets = ticks;
}

ticketTable.prototype.render = function(element) {
  // Render table...
  cell1.addEventListener("click", this.handleCellClick, false);
};

ticketTable.prototype.handleCellClick = function() {
  // "this" refers to the clicked cell element, not the ticketTable object
  // ...
};

Dalam fungsi handleCellClick, mengakses this.tickets akan gagal kerana "ini" merujuk sel yang diklik, bukan contoh Jadual tiket.

Penyelesaian: Menggunakan Bind

Untuk menyelesaikan isu ini, kami boleh menggunakan kaedah bind, yang membolehkan kami mentakrifkan nilai "ini" secara eksplisit untuk fungsi tertentu .

function ticketTable(ticks) {
  this.tickets = ticks;
}

ticketTable.prototype.render = function(element) {
  // Render table...
  cell1.addEventListener("click", this.handleCellClick.bind(this), false);
};

Dengan menggunakan bind(this), kami memastikan bahawa apabila fungsi handleCellClick dipanggil kemudian, "ini" akan merujuk dengan betul kepada objek Jadual tiket, membolehkan kami mengakses sifatnya seperti this.tickets .

Penyelesaian Alternatif

Selain mengikat, pendekatan alternatif termasuk menggunakan fungsi pengendali acara yang ditakrifkan secara eksplisit untuk menggunakan "ini" (bukan sifat onclick) atau mencipta handleEvent khas berfungsi untuk mengendalikan semua acara.

Atas ialah kandungan terperinci Mengapakah \"ini\" Berkelakuan Tidak Dijangka dalam Pengendali Acara JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!