Rumah >hujung hadapan web >tutorial js >Memahami Kata Kunci `ini` dalam JavaScript: Panduan Lengkap

Memahami Kata Kunci `ini` dalam JavaScript: Panduan Lengkap

Linda Hamilton
Linda Hamiltonasal
2024-12-14 19:41:10181semak imbas

Kata kunci ini dalam JavaScript adalah salah satu aspek bahasa yang paling berkuasa namun sering disalahfahamkan. Nilainya ditentukan oleh bagaimana fungsi dipanggil dan bukannya di mana ia ditakrifkan, menjadikannya penting untuk mengurus konteks dalam kod anda.

Dalam panduan ini, kami akan meneroka nuansa ini dengan contoh praktikal dan menyelami cara mengawalnya secara eksplisit menggunakan panggilan, gunakan dan ikat.


Asas ini

Dalam JavaScript, ini merujuk kepada objek yang sedang melaksanakan kod tersebut. Peraturan untuk menentukan nilainya bergantung pada jenis panggilan fungsi:

  1. Ikatan Tersirat: ini ialah objek sebelum panggilan kaedah.
  2. Pengikatan Eksplisit: ini boleh ditetapkan secara eksplisit menggunakan panggilan, gunakan atau ikat.
  3. Pengikatan baharu: Dalam fungsi pembina, ini merujuk kepada objek yang baru dibuat.
  4. Pengikat Global/Tetingkap: Jika tiada peraturan di atas digunakan, ini akan menjadi lalai kepada objek global (tetingkap dalam penyemak imbas atau global dalam Node.js).

Understanding the `this` Keyword in JavaScript: A Complete Guide


1. Ikatan Tersirat: Konteks daripada Pemanggil

Apabila fungsi dipanggil sebagai kaedah objek, ini merujuk kepada objek sebelum titik.

const car = {
  model: "Tesla",
  displayModel: function () {
    console.log(this.model);
  }
};

car.displayModel(); // Output: "Tesla"

Dalam contoh ini, this.model menunjuk kepada sifat model objek kereta kerana kereta ialah pemanggil.


2. Pengikatan Eksplisit: Menggunakan panggilan, gunakan dan ikat

Apabila anda memerlukan kawalan tepat ke atas nilai ini, anda boleh menggunakan panggilan, mohon atau ikat.

a. panggil

Kaedah panggilan serta-merta menggunakan fungsi dengan nilai ini yang ditentukan dan hujah individu.

function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: "Jack" };

greet.call(person, "Hello", "!"); // Output: "Hello, Jack!"

Di sini, panggilan memastikan this.name merujuk kepada sifat nama objek orang itu.

b. memohon

Kaedah guna adalah serupa dengan panggilan tetapi mengambil argumen sebagai tatasusunan dan bukannya secara individu.

greet.apply(person, ["Hi", "."]); // Output: "Hi, Jack."

Ini menjadikan penggunaan amat berguna apabila anda mempunyai pelbagai hujah untuk dihantar.

c. mengikat

Kaedah bind mengembalikan fungsi baharu dengan ini ditetapkan secara kekal kepada objek yang ditentukan, membenarkan seruan tertunda.

const boundGreet = greet.bind(person, "Welcome");
boundGreet("?"); // Output: "Welcome, Jack?"

Dengan bind, anda mencipta fungsi boleh guna semula yang terikat pada konteks tertentu.


3. Binding baru: Mencipta Objek dengan Fungsi Pembina

Apabila fungsi dipanggil dengan kata kunci baharu, ini merujuk kepada objek baharu yang sedang dibuat.

function Person(name) {
  this.name = name;
}

const jack = new Person("Jack");
console.log(jack.name); // Output: "Jack"

Pengendali baharu menetapkan ini kepada objek yang baru dibuat, membolehkan anda menentukan pelan tindakan objek boleh guna semula.


4. Pengikatan Global/Tetingkap: The Fallback

Jika tiada peraturan di atas digunakan, ini akan menjadi lalai kepada objek global. Walau bagaimanapun, dalam mod ketat ('gunakan ketat'), ini tidak ditentukan dalam kes sedemikian.

const car = {
  model: "Tesla",
  displayModel: function () {
    console.log(this.model);
  }
};

car.displayModel(); // Output: "Tesla"

Berhati-hati dengan pengikatan global kerana ia boleh membawa kepada tingkah laku yang tidak diingini.


Ringkasan panggilan, mohon dan ikat

Berikut ialah perbandingan pantas:

Method Purpose Execution Argument Passing
call Immediate invocation Yes Individually
apply Immediate invocation Yes Array of arguments
bind Delayed invocation (returns new function) No Individually or partially

Kesimpulan

Menguasai kata kunci ini adalah penting untuk menulis kod JavaScript yang bersih dan memahami konteks. Dengan memahami ikatan tersirat, eksplisit, baharu dan global, anda boleh mengurus perkara ini dengan yakin merentas pelbagai senario. Alat seperti memanggil, memohon dan mengikat menawarkan kawalan berbutir, menjadikan fungsi anda fleksibel dan boleh digunakan semula.

Ikuti saya di : Github Linkedin

Atas ialah kandungan terperinci Memahami Kata Kunci `ini` dalam JavaScript: Panduan Lengkap. 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