Mengapa &#this' dalam JavaScript Berbeza daripada Bahasa OOP Lain

Kata kunci

JavaScript this sering menyebabkan kekeliruan, terutamanya bagi pembangun yang datang daripada bahasa seperti C#, Java atau Python di mana self secara konsisten merujuk kepada contoh objek semasa. Tidak seperti bahasa tersebut, JavaScript this adalah dinamik, nilainya ditentukan oleh konteks pemanggilan fungsi. Panduan ini meringkaskan pelbagai senario yang mempengaruhi tingkah laku this.

1. Skop Global:

• Mod Tidak Tegas: this menunjuk ke objek global (window dalam penyemak imbas, global dalam Node.js).

console.log(this); // window or global

• Mod Tegas: this ialah undefined.

"use strict";
console.log(this); // undefined

2. Fungsi Dalaman:

• Fungsi Biasa: Dalam mod tidak ketat, this merujuk kepada objek global; dalam mod ketat, ia undefined.

function myFunc() {
  console.log(this); 
}
myFunc(); // window (non-strict), undefined (strict)

3. Kaedah Objek:

• Apabila fungsi dipanggil sebagai kaedah objek, this merujuk kepada objek itu.

const myObj = {
  name: "JavaScript",
  greet() {
    console.log(this.name); // this refers to myObj
  }
};
myObj.greet(); // Output: JavaScript

4. Fungsi Anak Panah:

• Fungsi anak panah tidak mempunyai fungsinya sendiri this. Mereka mewarisi this daripada skop leksikal mereka (konteks sekeliling).

const myObj = {
  name: "JavaScript",
  arrowFunc: () => {
    console.log(this.name); // Inherits this from the global scope
  }
};
myObj.arrowFunc(); // undefined (in browsers, this is window)

5. Pembina:

• Dalam fungsi atau kelas pembina, this merujuk kepada tika yang baru dibuat.

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, ${this.name}`);
  }
}

const person = new Person("Alice");
person.greet(); // Output: Hello, Alice

6. Pengikatan Eksplisit (call, apply, bind):

Fungsi JavaScript ialah objek dengan kaedah (call, apply, bind) untuk menetapkan this secara eksplisit.

• call dan apply menggunakan fungsi dengan nilai this yang ditentukan. call menggunakan hujah yang dipisahkan koma; apply mengambil tatasusunan.

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

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

• bind mengembalikan fungsi baharu dengan this terikat secara kekal.

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

7. Pendengar Acara:

• Fungsi Biasa: this merujuk kepada elemen yang mencetuskan acara.

const btn = document.querySelector("button");
btn.addEventListener("click", function() {
  console.log(this); // The button element
});

• Fungsi Anak Panah: this mewarisi daripada skop sekeliling, bukan elemen.

btn.addEventListener("click", () => {
  console.log(this); // this depends on the arrow function's definition context
});

8. setTimeout / setInterval:

• Fungsi Biasa: this lalai kepada objek global.

setTimeout(function() {
  console.log(this); // window in browsers
}, 1000);

• Fungsi Anak Panah: this diwarisi secara leksikal.

setTimeout(() => {
  console.log(this); // Inherits this from surrounding context
}, 1000);

9. Kelas:

• Di dalam kaedah kelas, this merujuk kepada tika kelas.

console.log(this); // window or global

10. Kehilangan Konteks (Kaedah Pengekstrakan):

Menetapkan kaedah kepada pembolehubah atau menghantarnya sebagai panggilan balik boleh menyebabkan kehilangan pengikat this.

"use strict";
console.log(this); // undefined

Penyelesaian: Gunakan .bind(obj) atau fungsi anak panah untuk mengekalkan konteks.

11. new Kata kunci:

Menggunakan new dengan fungsi mencipta objek baharu dan this merujuk kepada objek itu.

function myFunc() {
  console.log(this); 
}
myFunc(); // window (non-strict), undefined (strict)

Jadual Ringkasan:

Konteks

Context	this Refers To
Global (non-strict)	Global object (window/global)
Global (strict)	undefined
Object Method	The object owning the method
Arrow Function	Lexical scope (surrounding context)
Constructor/Class	The instance being created
call, apply, bind	Explicitly defined value
Event Listener	The element triggering the event
setTimeout/setInterval	Global object (regular function), lexical scope (arrow function)
new Keyword	The newly created object

Merujuk Kepada Global (tidak ketat) Objek global (tetingkap/global) Global (ketat) undefined Kaedah Objek Objek yang memiliki kaedah Fungsi Anak Panah Skop leksikal (konteks sekeliling) Pembina/Kelas Instance sedang dibuat panggil, apply, bind Nilai yang ditakrifkan secara eksplisit Pendengar Acara Elemen yang mencetuskan acara setTimeout/setInterval Objek global (fungsi biasa), skop leksikal (fungsi anak panah)

Kata kunci

Objek yang baru dibuat thisMemahami senario ini adalah penting untuk menulis kod JavaScript yang betul dan boleh diramal. Ingatlah untuk menggunakan teknik seperti pengikatan eksplisit apabila perlu untuk mengelakkan tingkah laku yang tidak dijangka.

Atas ialah kandungan terperinci Mengapa &#this' dalam JavaScript Berbeza daripada Bahasa OOP Lain. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!