Memahami fungsi anak panah JavaScript dan 'ini' mengikat mereka

Terdapat perbezaan utama antara fungsi anak panah dan fungsi biasa dalam mengikat ini. 1. Fungsi anak panah tidak mengikat sendiri ini, tetapi mewarisi dari skop periferal, iaitu, skop leksikal; 2. Ini fungsi biasa bergantung kepada kaedah panggilan, yang sering menyebabkan ini menunjuk kepada objek global dalam panggilan balik; 3. Menggunakan fungsi anak panah boleh mengelakkan masalah tersebut, yang sesuai untuk mengekalkan konsistensi ini; 4. Situasi di mana fungsi anak panah tidak disyorkan termasuk sebagai kaedah objek, pembina, dan senario yang memerlukan dinamik ini seperti pemprosesan peristiwa; 5. Apabila menggunakan fungsi anak panah dalam kaedah prototaip, ini tidak akan menunjuk kepada contoh, tetapi skop luaran.

Fungsi Arrow dalam JavaScript mungkin kelihatan seperti cara yang lebih pendek untuk menulis ekspresi fungsi, tetapi mereka datang dengan satu perbezaan utama yang mengembara banyak pemaju: bagaimana mereka mengendalikan kata kunci this .

Tidak seperti fungsi biasa, fungsi anak panah tidak mempunyai this sendiri. Sebaliknya, mereka mewarisi dari konteks sekitarnya. Itu boleh menjadi sangat berguna - atau benar -benar mengelirukan - bergantung kepada bagaimana dan di mana anda menggunakannya.

Bagaimana 'ini' berfungsi dalam fungsi biasa

Dalam fungsi biasa, nilai this bergantung pada bagaimana fungsi dipanggil. Itulah sebabnya anda sering melihat kekeliruan apabila menggunakan this dalam panggilan balik atau kaedah.

Contohnya:

 const user = {
  Nama: "Alex",
  salam: fungsi () {
    setTimeout (fungsi () {
      Console.log ("Hello," this.name); 
    }, 100);
  }
};

user.greet (); // Hello, tidak ditentukan

Di dalam setTimeout , this tidak lagi merujuk kepada objek user . Dalam mod bukan tegas, ia menunjuk kepada objek global ( window dalam pelayar), yang bermaksud this.name . Nama undefined .

Untuk memperbaikinya, pemaju biasa melakukan sesuatu seperti:

 const self = ini;
setTimeout (fungsi () {
  Console.log ("Hello," self.name); 
}, 100);

Atau mengikat this secara eksplisit.

Fungsi anak panah menangkap 'ini' secara leksikal

Sekarang masukkan fungsi anak panah. Ia tidak mengikat sendiri this . Sebaliknya, ia menggunakan nilai this dari fungsi ibu bapa yang tidak terdekat. Ini dipanggil scoping lexical.

Menulis semula contoh sebelumnya dengan fungsi anak panah:

 const user = {
  Nama: "Alex",
  salam: fungsi () {
    setTimeout (() => {
      Console.log ("Hello," this.name); 
    }, 100);
  }
};

user.greet (); // Hello, Alex

Itu lebih bersih. Fungsi anak panah tidak mencipta sendiri this , jadi this.name Nama betul merujuk kepada objek user .

Tingkah laku ini menjadikan fungsi anak panah sesuai untuk panggilan balik pendek di mana anda ingin memelihara luar this .

Apabila tidak menggunakan fungsi anak panah

Walaupun fungsi anak panah hebat untuk leksikal this , mereka tidak selalu menjadi pilihan yang tepat.

Berikut adalah beberapa situasi di mana anda harus mengelakkannya:

• Sebagai kaedah objek (melainkan jika anda ingin menangkap luar this )
• Sebagai pembina - fungsi anak panah tidak dapat digunakan dengan new
• Apabila anda this sendiri , seperti dalam pengendali acara atau kaedah DOM

Contohnya:

 butang const = document.QuerySelector ('butang');

Button.AdDeventListener ('klik', () => {
  console.log (ini); // tetingkap/global, bukan butang
});

Jika anda mengharapkan this untuk merujuk kepada elemen yang diklik, gunakan fungsi biasa sebaliknya:

 Button.AdDeventListener ('klik', fungsi () {
  console.log (ini); // elemen butang
});

Nota ringkas mengenai kaedah prototaip

Anda juga tidak boleh menggunakan fungsi anak panah apabila menentukan kaedah prototaip jika anda mengharapkan this untuk merujuk kepada contoh:

 fungsi orang (nama) {
  this.name = name;
}

Person.prototype.sayhi = () => {
  Console.log ("Hi," this.name);
};

const p = orang baru ("Jamie");
P.Sayhi (); // hi, tidak ditentukan

Sekali lagi, kerana fungsi anak panah tidak mempunyai sendiri this , ia merujuk kepada skop luar, yang mana mungkin objek global.

Jadi ya, fungsi anak panah sangat bagus untuk menjaga this konsisten tanpa perlu .bind() atau gunakan self = this . Tetapi mereka bukan pengganti drop-in di mana-mana-terutamanya apabila anda mahu this berubah berdasarkan bagaimana fungsi itu dipanggil.

Gunakan mereka di mana leksikal this membantu memudahkan kod anda, dan melekat dengan fungsi biasa apabila dinamik this diperlukan.

Pada dasarnya itu sahaja.

Atas ialah kandungan terperinci Memahami fungsi anak panah JavaScript dan 'ini' mengikat mereka. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!