Fahami panggilan, gunakan dan ikat dalam JavaScript dengan Contoh | Mbloging

Kaedah call, apply dan bind dalam JavaScript adalah penting untuk mengawal kata kunci this dalam fungsi. Mereka menyediakan cara untuk memanggil fungsi dengan konteks tertentu, yang boleh menjadi sangat berguna dalam senario pengekodan dunia sebenar.

Artikel ini akan menguraikan setiap kaedah secara terperinci, meneroka perbezaan antara kaedah tersebut dan memberikan contoh praktikal tentang bila dan sebab anda perlu menggunakannya.

Mengapakah call, apply dan bind penting dalam JavaScript?

Kata kunci

this dalam JavaScript adalah rumit kerana ia tidak selalu berfungsi seperti yang diharapkan. Kaedah call, apply dan bind membolehkan anda menetapkan nilai this secara eksplisit dalam fungsi, yang membantu menyelesaikan masalah skop biasa.

1. call()Kaedah

Kaedah

call() membolehkan anda memanggil fungsi dan segera menetapkan nilai thisnya kepada konteks yang disediakan (argumen pertama). Parameter yang tinggal dilalui satu demi satu, dipisahkan dengan koma.

Tatabahasa:

func.call(thisArg, arg1, arg2, ...)

1. thisArg: Nilai this di dalam fungsi.
2. arg1, arg2, ...: parameter dihantar ke fungsi.

Contoh Praktikal: Kaedah Pinjaman

Andaikan anda mempunyai dua objek: person dan greet, dan anda mahu menggunakan fungsi greet dengan konteks yang berbeza.

const person = {
  name: "Alice",
  age: 25
};

function greet(city, country) {
  console.log(`Hello, my name is ${this.name}, and I am from ${city}, ${country}.`);
}

// 使用call借用greet函数
greet.call(person, "New York", "USA");
// 输出：Hello, my name is Alice, and I am from New York, USA.

Kes penggunaan:

Ini berguna apabila anda ingin menggunakan semula fungsi dengan objek berbeza, mengelakkan keperluan untuk mengatasi kaedah serupa untuk setiap objek.

2. apply()Kaedah

apply() hampir sama dengan call() kecuali cara ia mengendalikan parameter. Daripada melepasi parameter satu demi satu, ia melepasinya sebagai tatasusunan.

Tatabahasa:

func.apply(thisArg, [argsArray])

1. thisArg: Nilai this di dalam fungsi.
2. argsArray: Tatasusunan parameter yang dihantar ke fungsi.

Contoh praktikal: Math.max

menggunakan tatasusunan

Andaikan anda ingin mencari nombor maksimum daripada tatasusunan. Math.max() JavaScript tidak boleh digunakan secara langsung dengan tatasusunan, tetapi anda boleh menggunakan apply() untuk menjadikannya berfungsi.

const numbers = [1, 5, 10, 15];

// 使用apply将数组元素作为单个参数传递
const maxNumber = Math.max.apply(null, numbers);
console.log(maxNumber); // 输出：15

Kes penggunaan:

Sesuai apabila anda perlu menghantar senarai parameter yang disimpan dalam tatasusunan. Ia sering digunakan dengan fungsi seperti apply() atau apabila anda mempunyai bilangan argumen yang tidak diketahui. Math.max()

3. Kaedahbind()

Kaedah

tidak memanggil fungsi serta-merta seperti bind() dan call() lakukan. Sebaliknya, ia mengembalikan fungsi baharu dengan nilai apply() tetap dan parameter pratakrif. this

Tatabahasa:

func.call(thisArg, arg1, arg2, ...)

1. thisArg: Nilai this di dalam fungsi.
2. arg1, arg2, ...: parameter ditetapkan secara kekal untuk fungsi baharu.

Contoh sebenar: parameter pratetap

Andaikan anda mempunyai butang yang apabila diklik harus menyambut seseorang dengan nama. Anda boleh menggunakan bind() untuk mencipta fungsi baharu dengan nama pratetap.

const person = {
  name: "Alice",
  age: 25
};

function greet(city, country) {
  console.log(`Hello, my name is ${this.name}, and I am from ${city}, ${country}.`);
}

// 使用call借用greet函数
greet.call(person, "New York", "USA");
// 输出：Hello, my name is Alice, and I am from New York, USA.

Kes penggunaan:

bind() amat berguna apabila anda perlu menyediakan fungsi yang akan dipanggil kemudian dengan konteks tertentu, seperti semasa mengendalikan pengendali acara atau fungsi panggil balik.

Perbezaan antara

call, apply dan bind

Berikut ialah pecahan pantas yang menyerlahkan perbezaan utama:

1. call()Kaedah

• Fungsi panggilan segera: Ya
• Parameter diluluskan: parameter tunggal
• Kembalikan fungsi baharu: Tidak

2. apply()Kaedah

• Fungsi panggilan segera: Ya
• Lulus parameter: sebagai tatasusunan
• Kembalikan fungsi baharu: Tidak

3. bind()Kaedah

• Fungsi panggilan segera: Tidak
• Parameter diluluskan: parameter tunggal
• Kembalikan fungsi baharu: Ya

Bila menggunakan setiap kaedah:

• Gunakan this apabila anda perlu segera memanggil fungsi dengan nilai call() tertentu.
• Gunakan apply() apabila anda perlu menghantar argumen sebagai tatasusunan.
• Gunakan this apabila anda ingin mencipta fungsi baharu dengan nilai bind() tetap dan mungkin parameter pratetap, terutamanya dalam kod dipacu peristiwa.

Senario sebenar: Menggunakan bind() untuk pemprosesan acara

Andaikan anda sedang membina aplikasi web dan perlu mengendalikan interaksi pengguna dengan butang. Anda boleh menggunakan bind() untuk mencipta pengendali acara yang lebih cekap yang mengekalkan konteks yang betul.

func.apply(thisArg, [argsArray])

Penjelasan:

Tanpa bind(), click() di dalam this akan merujuk kepada elemen butang itu sendiri, bukan objek Button. Dengan mengikat kaedah anda memastikan ia merujuk konteks yang betul (btn1).

Kesimpulan

Kaedah

, call() dan apply() dalam JavaScript ialah alat berkuasa yang membolehkan anda mengawal konteks bind() dalam fungsi. Sama ada anda meminjam kaedah daripada satu objek ke objek lain, menghantar parameter secara dinamik atau menyediakan pengendali acara, menguasai kaedah ini boleh menjadikan kod anda lebih fleksibel dan boleh digunakan semula. this

Memahami masa dan cara menggunakan

, call dan apply boleh meningkatkan keupayaan anda untuk menulis kod JavaScript yang cekap, ringkas dan berskala dengan ketara. bind

Soalan Lazim

1. Apakah perbezaan antara call, apply dan bind dalam JavaScript?
2. Perbezaan utama ialah cara mereka mengendalikan parameter. call() menghantar parameter secara individu, manakala apply() melepasi parameter sebagai tatasusunan. bind() Mengembalikan fungsi baharu dengan nilai this tetap dan parameter pratetap pilihan tanpa memanggil fungsi dengan segera.
3. Bilakah saya harus menggunakan call, apply dan bind dalam JavaScript?
4. Gunakan this apabila anda perlu segera memanggil fungsi dengan nilai call() tertentu. Apabila menghantar tatasusunan argumen ke fungsi, gunakan apply(). Gunakan this apabila anda perlu mencipta fungsi baharu dengan nilai bind() tetap dan parameter pratetap, terutamanya dalam pengendalian acara atau panggil balik.
5. Bolehkah call, apply dan bind dalam JavaScript digunakan dengan fungsi anak panah?
6. Tidak, call(), apply() dan bind() tidak menjejaskan fungsi anak panah kerana ia mewarisi daripada konteks leksikal sekelilingnya this, yang menjadikan penggunaan kaedah ini tidak relevan.
7. Mengapakah penting untuk menggunakan call, apply dan bind untuk mengawal this dalam JavaScript?
Nilai
8. this boleh menjadi tidak dapat diramalkan dalam JavaScript, bergantung pada cara fungsi dipanggil. Menggunakan call(), apply() dan bind() membolehkan anda menetapkan nilai this secara eksplisit, yang membantu menghalang ralat skop biasa dan memastikan kod anda berjalan seperti yang diharapkan.
9. Bolehkah saya menggunakan call, apply dan bind dengan fungsi terbina dalam seperti Math.max() dalam JavaScript?
10. Ya, anda boleh menggunakan apply() untuk menghantar tatasusunan kepada fungsi seperti Math.max() yang tidak menerima tatasusunan sendiri. Begitu juga, call() boleh digunakan untuk menghantar parameter secara individu kepada fungsi terbina dalam.

Atas ialah kandungan terperinci Fahami panggilan, gunakan dan ikat dalam JavaScript dengan Contoh | Mbloging. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!