Memahami Kata Kunci `ini` dalam JavaScript: Panduan Lengkap

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).

---

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!