Rumah  >  Artikel  >  hujung hadapan web  >  Memudahkan panggilan, memohon & mengikat dalam JavaScript

Memudahkan panggilan, memohon & mengikat dalam JavaScript

王林
王林asal
2024-07-29 16:15:501118semak imbas

Simplifying call, apply & bind in JavaScript

JavaScript membenarkan anda menukar konteks (nilai ini) fungsi menggunakan panggilan, gunakan dan ikat. Kaedah ini mungkin kelihatan rumit pada mulanya, tetapi dengan beberapa contoh mudah dan analogi kehidupan sebenar, anda akan memahaminya. Mari pecahkan mereka.

Kaedah panggilan

Fikirkan panggilan sebagai cara untuk meminjam kaedah daripada satu objek dan menggunakannya dengan objek lain.

Analogi Kehidupan Sebenar

Bayangkan anda mempunyai apl telefon pintar yang menyemak jadual anda. Rakan anda juga mempunyai apl yang sama tetapi belum menyediakan jadual mereka. Anda boleh meminjamkan rakan anda konfigurasi apl anda buat sementara waktu supaya mereka dapat melihat cara ia berfungsi dengan jadual mereka.

Contoh

const person1 = {
  firstName: 'John',
  lastName: 'Doe',
  fullName: function() {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

const person2 = {
  firstName: 'Jane',
  lastName: 'Smith'
};

person1.fullName.call(person2); // Outputs: Jane Smith

Di sini, person1 mempunyai kaedah untuk mencetak nama penuh mereka. Menggunakan panggilan, orang2 boleh meminjam kaedah ini dan mencetak nama penuh mereka sendiri.

Kaedah memohon

apply adalah serupa dengan panggilan, tetapi ia memerlukan argumen sebagai tatasusunan.

Analogi Kehidupan Sebenar

Bayangkan anda berada di restoran memesan makanan. Daripada memberitahu pelayan setiap item secara individu, anda menyerahkan senarai item kepada pelayan.

Contoh

function sum(a, b) {
  console.log(a + b);
}

sum.apply(null, [5, 10]); // Outputs: 15

Dalam contoh ini, gunakan panggilan fungsi jumlah dengan argumen 5 dan 10 disediakan sebagai tatasusunan.

Kaedah mengikat

bind mencipta fungsi baharu yang, apabila dipanggil, menetapkan nilai ini kepada nilai yang disediakan. Ia seperti meminjamkan konfigurasi apl anda secara kekal kepada rakan anda supaya mereka boleh menggunakannya pada bila-bila masa yang mereka mahu.

Analogi Kehidupan Sebenar

Andaikan anda mempunyai alat kawalan jauh TV khas yang hanya berfungsi dengan TV anda. Anda boleh membuat alat kawalan jauh pendua yang berfungsi dengan TV rakan anda secara kekal.

Contoh

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const retrieveX = module.getX;
console.log(retrieveX()); // Outputs: undefined (because 'this' is not module)

const boundGetX = retrieveX.bind(module);
console.log(boundGetX()); // Outputs: 42

Dalam contoh ini, bind mencipta fungsi baharu boundGetX yang sentiasa menggunakan modul sebagai nilai ini.

Kes Penggunaan Praktikal

1. Kaedah Pinjaman

Anda boleh menggunakan kaedah panggilan untuk meminjam daripada objek lain.

const person = {
  name: 'Alice',
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};

const anotherPerson = {
  name: 'Bob'
};

person.greet.call(anotherPerson); // Outputs: Hello, Bob

2. Menggunakan apply untuk Fungsi Matematik

apply berguna untuk menghantar tatasusunan kepada fungsi seperti Math.max.

const numbers = [5, 6, 2, 3, 7];
const max = Math.max.apply(null, numbers); 
console.log(max); // Outputs: 7

3. Argumen Fungsi Pra-tetapan

bind boleh digunakan untuk mencipta fungsi dengan argumen pratetap.

function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);
console.log(double(5)); // Outputs: 10

Di sini, bind mencipta fungsi baharu berganda dengan a sentiasa 2, menjadikannya mudah untuk menggandakan sebarang nombor.

Kesimpulan

Memahami panggilan, gunakan dan ikat membantu anda mengawal cara fungsi dilaksanakan dalam JavaScript. Mereka membenarkan anda menukar nilai ini dan argumen yang telah ditetapkan, menjadikan kod anda lebih fleksibel dan boleh digunakan semula. Dengan menguasai kaedah ini, anda boleh menulis kod JavaScript yang lebih bersih dan cekap.

Atas ialah kandungan terperinci Memudahkan panggilan, memohon & mengikat dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn