Memahami Kata Kunci ini dalam JavaScript

Kata Kunci ini dalam JavaScript

Kata kunci ini ialah salah satu ciri JavaScript yang paling berkuasa namun tidak difahami. Ia merujuk kepada konteks di mana fungsi dilaksanakan dan boleh berbeza-beza bergantung pada cara fungsi dipanggil.

---

1. Apakah ini?

Nilai ini ditentukan oleh konteks pelaksanaan—persekitaran di mana fungsi itu dijalankan. Ia biasanya merujuk kepada objek, tetapi nilai tepatnya bergantung pada cara dan tempat fungsi itu digunakan.

---

2. Bagaimana ini Berfungsi

A. Konteks Global

Dalam konteks pelaksanaan global (di luar sebarang fungsi), ini merujuk kepada objek global:

• Dalam pelayar: tetingkap
• Dalam Node.js: global

Contoh:

console.log(this); 
// In a browser: window
// In Node.js: global

---

B. Di Dalam Fungsi Biasa

Apabila fungsi digunakan dalam skop global, ini lalai kepada objek global (mod tidak ketat). Dalam mod ketat, ini tidak ditentukan.

Contoh:

function showThis() {
  console.log(this);
}

showThis(); 
// Non-strict mode: window (global object)
// Strict mode: undefined

---

C. Di Dalam Kaedah Objek

Apabila fungsi dipanggil sebagai kaedah objek, ini merujuk kepada objek itu sendiri.

Contoh:

const obj = {
  name: "JavaScript",
  getName: function () {
    console.log(this.name);
  },
};

obj.getName(); // Output: JavaScript

---

D. Di Dalam Fungsi Pembina

Dalam fungsi pembina, ini merujuk kepada objek yang baru dibuat.

Contoh:

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

const john = new Person("John");
console.log(john.name); // Output: John

---

E. Di Dalam Fungsi Anak Panah

Fungsi anak panah tidak mempunyai ini sendiri. Sebaliknya, mereka mewarisi ini daripada skop leksikal sekeliling mereka.

Contoh:

const obj = {
  name: "JavaScript",
  getName: function () {
    const arrowFunc = () => console.log(this.name);
    arrowFunc();
  },
};

obj.getName(); // Output: JavaScript

---

3. Mengikat ini

Anda boleh menetapkan nilai ini secara eksplisit menggunakan panggilan, gunakan atau ikat.

A. Menggunakan panggilan

Memanggil fungsi dengan nilai tertentu ini dan hujah yang disediakan secara individu.

Contoh:

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

const user = { name: "Alice" };
greet.call(user, "Hello"); // Output: Hello, Alice

B. Menggunakan apply

Berfungsi seperti panggilan tetapi mengambil hujah sebagai tatasusunan.

Contoh:

greet.apply(user, ["Hi"]); // Output: Hi, Alice

C. Menggunakan bind

Mengembalikan fungsi baharu dengan ini ditetapkan secara kekal kepada objek yang ditentukan.

Contoh:

const boundGreet = greet.bind(user);
boundGreet("Hey"); // Output: Hey, Alice

---

4. Kes Penggunaan Biasa ini

A. Pengendali Acara

Dalam pendengar acara, ini merujuk kepada elemen yang mencetuskan acara.

Contoh:

console.log(this); 
// In a browser: window
// In Node.js: global

B. Kaedah Objek Dinamik

ini membolehkan objek berkongsi kaedah secara dinamik.

Contoh:

function showThis() {
  console.log(this);
}

showThis(); 
// Non-strict mode: window (global object)
// Strict mode: undefined

C. Kaedah Kelas

Dalam kelas, ini merujuk kepada tika semasa.

Contoh:

const obj = {
  name: "JavaScript",
  getName: function () {
    console.log(this.name);
  },
};

obj.getName(); // Output: JavaScript

---

5. Perangkap Biasa dan Amalan Terbaik

A. Kehilangan Konteks

Apabila kaedah ditugaskan kepada pembolehubah, ini mungkin kehilangan konteks asalnya.

Contoh:

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

const john = new Person("John");
console.log(john.name); // Output: John

Penyelesaian: Gunakan fungsi bind atau anak panah.

const obj = {
  name: "JavaScript",
  getName: function () {
    const arrowFunc = () => console.log(this.name);
    arrowFunc();
  },
};

obj.getName(); // Output: JavaScript

B. Dalam Fungsi Panggilan Balik

ini dalam panggilan balik sering kehilangan konteksnya.

Contoh:

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

const user = { name: "Alice" };
greet.call(user, "Hello"); // Output: Hello, Alice

Penyelesaian: Gunakan fungsi anak panah.

greet.apply(user, ["Hi"]); // Output: Hi, Alice

---

6. Ringkasan

• ini merujuk kepada konteks pelaksanaan fungsi.
• Dalam fungsi anak panah, ini diwarisi daripada skop leksikal.
• Gunakan panggilan, mohon atau ikat untuk menetapkan nilai ini secara eksplisit.
• Fahami cara ini berkelakuan dalam konteks yang berbeza untuk mengelakkan pepijat dalam kod anda.

Menguasai ini membuka kunci pemahaman yang lebih mendalam tentang gelagat JavaScript dan membolehkan anda menulis kod yang lebih bersih dan boleh diramal.

Hai, saya Abhay Singh Kathayat!
Saya seorang pembangun tindanan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.
Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.

Atas ialah kandungan terperinci Memahami Kata Kunci ini dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!