Bagaimana saya menggunakan panggilan, memohon, dan mengikat untuk mengawal nilai & quot; this & quot; Dalam JavaScript?

Menguasai call , apply , dan bind JavaScript: Panduan Komprehensif

Artikel ini meneroka nuansa call , apply , dan bind JavaScript, memberi tumpuan kepada penggunaannya dalam mengawal nilai this .

Bagaimanakah saya menggunakan call , apply , dan bind untuk mengawal nilai "ini" dalam javascript?

Dalam JavaScript, kata kunci this merujuk kepada objek yang memiliki fungsi yang sedang dilaksanakan. Walau bagaimanapun, nilai this tidak dapat diramalkan, terutamanya dalam fungsi yang diluluskan sebagai panggilan balik atau digunakan dalam pengendali acara. call , apply , dan bind menyediakan cara untuk menetapkan nilai this secara eksplisit, memberikan anda kawalan yang tepat ke atas konteks fungsi anda.

• call() : Kaedah ini memanggil fungsi dengan serta -merta, menetapkan nilai this kepada hujah pertama yang diserahkan kepadanya. Hujah -hujah berikutnya diluluskan sebagai hujah individu kepada fungsi tersebut.

 <code class="javascript">function greet(greeting) { console.log(greeting ", " this.name); } const person = { name: "Alice" }; greet.call(person, "Hello"); // Output: Hello, Alice</code>

• apply() : Sama seperti call() , apply() juga memanggil fungsi dengan serta -merta dan menetapkan nilai this . Walau bagaimanapun, bukannya hujah individu, ia menerima array (atau objek seperti array) argumen.

 <code class="javascript">function sum(a, b) { return ab this.value; } const obj = { value: 10 }; const numbers = [5, 3]; const result = sum.apply(obj, numbers); // Output: 18</code>

• bind() : Tidak seperti call() dan apply() , bind() tidak segera memanggil fungsi tersebut. Sebaliknya, ia mewujudkan fungsi baru yang, apabila dipanggil, akan mempunyai nilai this ditetapkan kepada nilai yang disediakan. Ini berguna untuk mewujudkan fungsi yang digunakan sebahagiannya atau untuk memastikan nilai -nilai this konsisten dalam panggilan balik.

 <code class="javascript">function sayHello() { console.log("Hello, " this.name); } const person = { name: "Bob" }; const boundSayHello = sayHello.bind(person); boundSayHello(); // Output: Hello, Bob</code>

Apakah perbezaan praktikal antara call , apply , dan bind JavaScript?

Perbezaan utama terletak pada ketika mereka melaksanakan fungsi dan bagaimana mereka mengendalikan argumen:

• call() dan apply() : Kaedah ini segera melaksanakan fungsi tersebut. call() mengambil hujah individu, sementara apply() mengambil pelbagai hujah. Pilih call() untuk bilangan argumen yang kecil dan tetap dan apply() apabila anda mempunyai array atau bilangan argumen yang berubah -ubah.
• bind() : Kaedah ini mengembalikan fungsi baru yang, apabila dipanggil kemudian, akan mempunyai this terikat pada nilai yang ditentukan. Ia tidak melaksanakan fungsi dengan segera. Gunakan bind() apabila anda perlu menetapkan konteks this untuk pelaksanaan kemudian, seperti dengan panggilan balik atau pengendali acara.

Bagaimanakah saya boleh menggunakan call , apply , dan bind untuk menyelesaikan masalah kata kunci "ini" dalam javascript?

Masalah "ini" timbul dalam panggilan balik (misalnya, setTimeout , addEventListener ), dan kaedah yang diluluskan sebagai argumen kepada fungsi lain. call , apply , dan bind penyelesaian tawaran:

• Callbacks: Dalam panggilan balik, this sering merujuk kepada objek global (tetingkap dalam pelayar, atau tidak ditentukan dalam mod yang ketat). bind() sesuai di sini:

 <code class="javascript">const myObject = { name: "Charlie", logName: function() { console.log(this.name); } }; setTimeout(myObject.logName.bind(myObject), 1000); // Ensures 'this' refers to myObject</code>

• Kaedah yang diluluskan sebagai hujah: Apabila meluluskan kaedah sebagai hujah kepada fungsi lain, konteks this mungkin berubah. call() atau apply() dapat mengekalkan konteks yang betul:

 <code class="javascript">function processData(callback) { const data = { value: 20 }; callback.call(data, data.value); //Ensures this refers to the data object } function myCallback(val){ console.log("Value is: " val " and this.value is: " this.value); } processData(myCallback); // Output: Value is: 20 and this.value is: 20</code>

Bilakah saya harus memilih call , apply , atau bind untuk memanipulasi konteks fungsi JavaScript?

Pilihannya bergantung pada keadaan tertentu:

• Pelaksanaan segera dengan hujah individu: Gunakan call() .
• Pelaksanaan segera dengan pelbagai argumen: Gunakan apply() .
• Pelaksanaan yang ditangguhkan, pra-penetapan this : gunakan bind() .

Dengan memahami perbezaan ini dan menerapkannya dengan sewajarnya, anda dapat menguruskan konteks this dengan berkesan dalam kod JavaScript anda, mengelakkan tingkah laku yang tidak dijangka dan menulis lebih banyak fungsi yang mantap dan boleh dipelihara.

Atas ialah kandungan terperinci Bagaimana saya menggunakan panggilan, memohon, dan mengikat untuk mengawal nilai & quot; this & quot; Dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!