Rumah  >  Artikel  >  hujung hadapan web  >  Menguasai JavaScript: Memahami panggilan, gunakan dan ikat.

Menguasai JavaScript: Memahami panggilan, gunakan dan ikat.

WBOY
WBOYasal
2024-08-13 14:32:321072semak imbas

Mastering JavaScript: Understanding call, apply, and bind.

JavaScript ialah bahasa pengaturcaraan serba boleh dan berkuasa yang membentuk tulang belakang pembangunan web moden. Apabila pembangun maju dalam perjalanan JavaScript mereka, mereka menghadapi konsep yang lebih maju yang boleh meningkatkan kemahiran pengekodan mereka dengan ketara. Antara konsep ini ialah kaedah panggilan, terapkan, dan ikatan. Kaedah ini adalah alat penting untuk memanipulasi konteks pelaksanaan fungsi dan mengurus kata kunci ini. Dalam artikel ini, kami akan meneroka kaedah ini secara mendalam, memahami perbezaannya dan mempelajari cara menggunakannya dengan berkesan dalam projek JavaScript anda.

Memahami Konteks Fungsi (ini)

Sebelum menyelam ke dalam panggilan, memohon dan mengikat, adalah penting untuk memahami konsep kata kunci ini dalam JavaScript

ini merujuk kepada objek yang melaksanakan fungsi semasa. Nilai ini bergantung pada bagaimana fungsi dipanggil:

  • Dalam kaedah objek, ini merujuk kepada objek.
  • Dalam fungsi, ini merujuk kepada objek global (tetingkap dalam penyemak imbas).
  • Dalam acara, ini merujuk kepada elemen yang menerima acara.
  • Dalam mod ketat ("gunakan ketat";), ini tidak ditentukan dalam fungsi.

Namun, ada kalanya anda perlu menetapkan nilai ini secara manual. Di situlah panggilan, mohon dan ikat dimainkan.

Kaedah panggilan

Kaedah panggilan digunakan untuk memanggil fungsi dengan nilai tertentu ini dan hujah yang disediakan secara individu. Ini amat berguna apabila anda ingin meminjam kaedah daripada objek lain atau menetapkan konteks secara dinamik. Sintaksnya adalah seperti berikut:

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

Berikut ialah contoh untuk menggambarkan cara panggilan() berfungsi:

const person = {
  fullName: function(city, country) {
    console.log(this.firstName + " " + this.lastName + " lives in " + city + ", " + country);
  }
};

const john = {
  firstName: "John",
  lastName: "Doe"
};

person.fullName.call(john, "New York", "USA");
// Output: John Doe lives in New York, USA

Dalam contoh ini, kami menggunakan call() untuk menggunakan fungsi Nama penuh dengan john sebagai nilai ini, dengan berkesan meminjam kaedah daripada objek orang.

Kaedah memohon

Kaedah apply() adalah serupa dengan call(), tetapi ia memerlukan argumen sebagai tatasusunan. Sintaksnya ialah:

function.apply(thisArg, [argsArray])

Mari kita ambil contoh.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName + " " + this.lastName + " lives in " + city + ", " + country);
  }
};

const john = {
  firstName: "John",
  lastName: "Doe"
};

person.fullName.apply(john, ["New York", "USA"]);
// Output: John Doe lives in New York, USA

Perbezaan utama antara call() dan apply() ialah cara mereka mengendalikan hujah. call() menjangkakan hujah akan dihantar secara individu, manakala apply() mengharapkannya dalam tatasusunan.

Kaedah mengikat

Tidak seperti call() dan apply(), yang serta-merta menggunakan fungsi tersebut, bind() mencipta fungsi baharu dengan nilai ini tetap. Ini amat berguna untuk mencipta fungsi yang boleh dipanggil kemudian dengan konteks tertentu. Sintaksnya ialah:

const boundFunction = function.bind(thisArg, arg1, arg2, ...)

Berikut ialah contoh cara bind() berfungsi:

const person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

const logName = function() {
  console.log(this.fullName());
};

const boundLogName = logName.bind(person);
boundLogName(); // Output: John Doe

Dalam contoh ini, kami mencipta fungsi baharu boundLogName yang mempunyai orang terikat secara kekal sebagai nilai ini.

Perbandingan dan Kes Penggunaan

  • panggilan: Gunakan apabila anda perlu menggunakan fungsi dan mengawal konteks ini dengan segera, memberikan hujah secara individu.
  • terapkan: Sama seperti panggilan, tetapi gunakannya apabila anda mempunyai pelbagai hujah.
  • bind: Gunakan apabila anda perlu mencipta fungsi yang boleh dipanggil kemudian dengan konteks tertentu ini.

Pertimbangan Prestasi

Walaupun panggilan, gunakan dan ikat adalah alat yang berkuasa, adalah penting untuk mempertimbangkan implikasi prestasinya. bind() biasanya lebih perlahan daripada call() atau apply() kerana ia mencipta fungsi baharu. Jika anda bekerja dalam bahagian kritikal prestasi kod anda, anda mungkin mahu menggunakan call() atau apply() dan bukannya bind().

Amalan Terbaik dan Perangkap Biasa

Apabila menggunakan panggilan, gunakan dan ikat, ingatlah amalan terbaik ini:

  • Sentiasa jelas tentang perkara ini harus dirujuk dalam fungsi anda.
  • Gunakan call() atau apply() apabila anda mahu menggunakan fungsi serta-merta dengan nilai tertentu ini.
  • Gunakan bind() apabila anda ingin mencipta fungsi baharu dengan tetapkan nilai ini untuk kegunaan kemudian.
  • Berhati-hati apabila menggunakan kaedah ini dengan fungsi anak panah, kerana fungsi anak panah mempunyai leksikal pengikatan ini yang tidak boleh diubah.

Perangkap biasa ialah melupakan bahawa bind() mengembalikan fungsi baharu. Pastikan sama ada anda menetapkan semula fungsi terikat atau menggunakannya terus

Kesimpulan

Menguasai panggilan, memohon dan mengikat adalah langkah penting ke arah menjadi pembangun JavaScript yang mahir. Kaedah ini menyediakan cara yang berkesan untuk mengawal konteks pelaksanaan fungsi dan mengurus kata kunci ini. Dengan memahami dan menggunakan alatan ini dengan berkesan, anda boleh menulis kod yang lebih fleksibel, boleh digunakan semula dan boleh diselenggara.

Bedenken Sie beim weiteren Erkunden von JavaScript, dass diese Konzepte nur die Spitze des Eisbergs sind. Die Sprache entwickelt sich ständig weiter und es ist von entscheidender Bedeutung, über die neuesten Funktionen und Best Practices auf dem Laufenden zu bleiben. Üben Sie die Verwendung von Call, Apply und Bind in Ihren Projekten, und Sie werden bald feststellen, dass Sie eleganteren und effizienteren JavaScript-Code schreiben.

Atas ialah kandungan terperinci Menguasai JavaScript: Memahami panggilan, gunakan dan ikat.. 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