Rumah >hujung hadapan web >tutorial js >Mengapa &#this' dalam JavaScript Berbeza daripada Bahasa OOP Lain

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

Linda Hamilton
Linda Hamiltonasal
2025-01-17 14:34:12746semak imbas

Why

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).
<code class="language-javascript">console.log(this); // window or global</code>
  • Mod Tegas: this ialah undefined.
<code class="language-javascript">"use strict";
console.log(this); // undefined</code>

2. Fungsi Dalaman:

  • Fungsi Biasa: Dalam mod tidak ketat, this merujuk kepada objek global; dalam mod ketat, ia undefined.
<code class="language-javascript">function myFunc() {
  console.log(this); 
}
myFunc(); // window (non-strict), undefined (strict)</code>

3. Kaedah Objek:

  • Apabila fungsi dipanggil sebagai kaedah objek, this merujuk kepada objek itu.
<code class="language-javascript">const myObj = {
  name: "JavaScript",
  greet() {
    console.log(this.name); // this refers to myObj
  }
};
myObj.greet(); // Output: JavaScript</code>

4. Fungsi Anak Panah:

  • Fungsi anak panah tidak mempunyai fungsinya sendiri this. Mereka mewarisi this daripada skop leksikal mereka (konteks sekeliling).
<code class="language-javascript">const myObj = {
  name: "JavaScript",
  arrowFunc: () => {
    console.log(this.name); // Inherits this from the global scope
  }
};
myObj.arrowFunc(); // undefined (in browsers, this is window)</code>

5. Pembina:

  • Dalam fungsi atau kelas pembina, this merujuk kepada tika yang baru dibuat.
<code class="language-javascript">class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, ${this.name}`);
  }
}

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

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.
<code class="language-javascript">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</code>
  • bind mengembalikan fungsi baharu dengan this terikat secara kekal.
<code class="language-javascript">const boundGreet = greet.bind(user);
boundGreet("Hello"); // Output: Hello, Alice</code>

7. Pendengar Acara:

  • Fungsi Biasa: this merujuk kepada elemen yang mencetuskan acara.
<code class="language-javascript">const btn = document.querySelector("button");
btn.addEventListener("click", function() {
  console.log(this); // The button element
});</code>
  • Fungsi Anak Panah: this mewarisi daripada skop sekeliling, bukan elemen.
<code class="language-javascript">btn.addEventListener("click", () => {
  console.log(this); // this depends on the arrow function's definition context
});</code>

8. setTimeout / setInterval:

  • Fungsi Biasa: this lalai kepada objek global.
<code class="language-javascript">setTimeout(function() {
  console.log(this); // window in browsers
}, 1000);</code>
  • Fungsi Anak Panah: this diwarisi secara leksikal.
<code class="language-javascript">setTimeout(() => {
  console.log(this); // Inherits this from surrounding context
}, 1000);</code>

9. Kelas:

  • Di dalam kaedah kelas, this merujuk kepada tika kelas.
<code class="language-javascript">console.log(this); // window or global</code>

10. Kehilangan Konteks (Kaedah Pengekstrakan):

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

<code class="language-javascript">"use strict";
console.log(this); // undefined</code>

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.

<code class="language-javascript">function myFunc() {
  console.log(this); 
}
myFunc(); // window (non-strict), undefined (strict)</code>

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!

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