Bagaimana Fungsi Anak Panah dalam JavaScript Mengendalikan Pengikatan `ini` dan Apakah Penyelesaiannya?

Fungsi Anak Panah dan Mengikat: Menyahmistifikasi Gelagat 'ini'

Fungsi anak panah, ciri JavaScript moden, menawarkan sintaks ringkas untuk mengisytiharkan fungsi. Walau bagaimanapun, satu perbezaan yang perlu diberi perhatian antara fungsi anak panah dan fungsi biasa ialah tingkah laku mereka berkenaan pengikatan 'ini'.

Ikatan 'ini' dalam Fungsi Anak Panah

Fungsi anak panah tidak mencipta pengikatan 'ini' mereka sendiri . Sebaliknya, mereka mewarisinya dari skop yang disertakan. Ini bermakna 'ini' dalam fungsi anak panah merujuk kepada nilai yang sama seperti 'ini' dalam fungsi sekeliling atau skop global.

Contoh Tidak Terikat 'ini'

Pertimbangkan contoh yang disediakan dalam soalan:

var f = () => console.log(this);

Di sini, 'ini' dalam fungsi anak panah 'f' tidak terikat. Apabila 'f' dipanggil, ia menggunakan pengikatan 'ini' skop global, yang biasanya merujuk kepada objek tetingkap. Akibatnya, memanggil 'fBound()' akan log objek tetingkap dan bukannya objek 'o' seperti yang dimaksudkan.

Mengikat 'ini' dalam Fungsi Anak Panah

Sementara fungsi anak panah tidak menyokong pengikatan tradisional menggunakan 'bind', terdapat pendekatan alternatif untuk mencapai fungsi yang sama:

• Menggunakan Biasa Fungsi: Takrifkan fungsi biasa sebagai perantara, mengikat 'ini' pada objek yang diingini sebelum mengembalikan fungsi anak panah:

var fBound = () => {
  console.log(this);
}.bind(o);

• Menggunakan Kelas ES6: Tentukan kelas yang menyediakan pengikatan 'ini' yang diingini dan gunakan fungsi anak panah sebagai kaedah:

class MyClass {
  constructor() {
    this.f = () => console.log(this);
  }
}

const o = new MyClass();
o.f(); // logs the 'o' object

Kesimpulannya, sementara fungsi anak panah menawarkan banyak kelebihan, mereka berkelakuan berbeza mengenai pengikatan 'ini' berbanding dengan fungsi biasa. Dengan memahami perbezaan ini, anda boleh menggunakan fungsi anak panah dan pendekatan alternatif dengan berkesan untuk mencapai pengikatan 'ini' yang diingini.

Atas ialah kandungan terperinci Bagaimana Fungsi Anak Panah dalam JavaScript Mengendalikan Pengikatan `ini` dan Apakah Penyelesaiannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!