JavaScript 마스터하기: 호출, 적용 및 바인딩 이해.

WBOY
풀어 주다: 2024-08-13 14:32:32
원래의
1000명이 탐색했습니다.

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, terap, 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 sedang 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 pelayar).
  • Dalam sesuatu acara, ini merujuk kepada elemen yang menerima acara tersebut.
  • 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 memainkan peranan.

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])
로그인 후 복사

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.
  • apply: 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, mohon 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 di bahagian kritikal prestasi kod anda, anda mungkin mahu menggunakan call() atau apply() dan bukannya bind().

Amalan Terbaik dan Perangkap Biasa

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

  • Sentiasa jelas tentang perkara ini yang patut dirujuk dalam fungsi anda.
  • Gunakan call() atau apply() apabila anda mahu menggunakan fungsi dengan segera dengan nilai ini yang khusus.
  • Gunakan bind() apabila anda ingin mencipta fungsi baharu dengan nilai ini tetap 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 terlupa bahawa bind() mengembalikan fungsi baharu. Pastikan sama ada anda menetapkan semula fungsi terikat atau menggunakannya secara 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.

JavaScript를 계속 탐색하면서 이러한 개념은 빙산의 일각에 불과하다는 점을 기억하세요. 언어는 끊임없이 발전하고 있으므로 최신 기능과 모범 사례를 지속적으로 업데이트하는 것이 중요합니다. 프로젝트에서 호출, 적용, 바인딩 사용을 연습하면 곧 더욱 우아하고 효율적인 JavaScript 코드를 작성하게 될 것입니다.

위 내용은 JavaScript 마스터하기: 호출, 적용 및 바인딩 이해.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!