Mengapakah `$(this)` Berlaku Salah dengan jQuery dan Fungsi Anak Panah ES6?

Menggunakan jQuery $(this) dengan ES6 Arrow Functions: Lexical This Binding

Apabila menggunakan jQuery $(this) dengan fungsi anak panah ES6, pembangun mungkin menghadapi isu di mana $(this) ditukar kepada penutupan gaya ES5 menggunakan diri = ini. Tingkah laku ini disebabkan oleh sifat mengikat leksikal fungsi anak panah.

Isu:

Kod berikut menunjukkan masalah:

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

Apabila fungsi anak panah digunakan sebaliknya:

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

$(ini) ditukar kepada Penutupan gaya ES5, yang membawa kepada tingkah laku yang tidak dijangka.

Penyelesaian:

Isu ini merupakan ciri yang wujud bagi fungsi anak panah ES6 dan tidak boleh dipintas menggunakan Traceur. Untuk menyelesaikannya, seseorang mesti mengelak daripada menggunakan ini untuk mengakses elemen yang diklik. Sebaliknya, sifat event.currentTarget boleh digunakan:

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

jQuery secara khusus menyediakan event.currentTarget untuk situasi di mana pengikatan ini mungkin samar-samar disebabkan oleh faktor luaran, seperti fungsi panggil balik terikat kepada konteks lain melalui .bind().

Atas ialah kandungan terperinci Mengapakah `$(this)` Berlaku Salah dengan jQuery dan Fungsi Anak Panah ES6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!