Memahami 'ini' dalam JavaScript dan kelakuannya dalam pelbagai senario

pernah ditumpuk oleh kata kunci JavaScript's

? Anda tidak bersendirian! Memegang nuansa beliau adalah seperti mempelajari kemahiran baru - ia memerlukan amalan, tetapi sebaik sahaja anda mendapatkannya, semuanya klik. this

post blog ini demystifies

, meneroka tingkah lakunya dalam konteks yang berbeza dengan contoh ilustrasi. Mari kita mulakan! this

Apa itu ? this

Dalam JavaScript,

adalah kata kunci yang mewakili objek fungsi milik. Ia membolehkan fungsi yang boleh digunakan semula, dinamik dengan menentukan nilainya pada masa runtime. Konteks panggilan fungsi menentukan nilai this, menjadikannya kuat dan kadang -kadang mengelirukan. this

Mata utama:

• adalah kata kunci, bukan pembolehubah. this
anda tidak boleh memberikan nilai secara langsung kepada
• . this
nilainya ditentukan secara dinamik semasa runtime.

analogi dunia nyata:

Bayangkan

sebagai pemandu pelancong muzium. Di Muzium Seni, panduan mewakili Muzium Seni; Di Muzium Sejarah, mereka mewakili Muzium Sejarah. Begitu juga, this menyesuaikan diri dengan konteksnya. this

dalam senario yang berbeza: this

1. Konteks Global (mengikat lalai):

fungsi luar,

merujuk kepada objek global. Ini berbeza -beza bergantung kepada persekitaran: this

Penyemak imbas (tanpa mod ketat):

• adalah objek . this window node.js (tanpa mod ketat):
• adalah (objek kosong) kerana modul node.js mempunyai skop mereka sendiri. this {}
Contoh:

mod ketat:

<code class="language-javascript">console.log(this); // Browser: window object; Node.js: {}</code>

dalam mod ketat,

kekal dalam penyemak imbas dan dalam node.js. this window undefined Contoh:

2. Di dalam fungsi biasa:

<code class="language-javascript">'use strict';
console.log(this); // Browser: window object; Node.js: undefined</code>

dalam fungsi biasa, nilai bergantung pada bagaimana fungsi dipanggil.

this

tanpa mod yang ketat:

dalam pelayar,
• adalah objek ; Dalam node.js, itu adalah objek global. this window dengan mod yang ketat:
• adalah . this undefined
Contoh:

3. Kaedah Objek Di dalam (mengikat tersirat):

<code class="language-javascript">function showThis() {
  console.log(this);
}
showThis(); // Without strict mode: Browser - window; Node.js - global object; With strict mode: undefined</code>

Apabila fungsi adalah kaedah objek, menunjuk ke objek itu.

this Contoh:

4. Fungsi anak panah:

<code class="language-javascript">const book = {
  title: 'JavaScript Mastery',
  showTitle: function() {
    console.log(this.title);
  }
};
book.showTitle(); // Output: JavaScript Mastery</code>

Fungsi anak panah tidak mempunyai mereka sendiri. Mereka mewarisi dari skop leksikal sekitar mereka.

Contoh: this

<code class="language-javascript">console.log(this); // Browser: window object; Node.js: {}</code>

5. Fungsi Pembina (mengikat baru):

dengan kata kunci new, this merujuk kepada objek yang baru dibuat.

Contoh:

<code class="language-javascript">'use strict';
console.log(this); // Browser: window object; Node.js: undefined</code>

6. Kelas:

dalam kelas ES6, this berkelakuan sama dengan fungsi pembina.

Contoh:

<code class="language-javascript">function showThis() {
  console.log(this);
}
showThis(); // Without strict mode: Browser - window; Node.js - global object; With strict mode: undefined</code>

7. call(), , (mengikat eksplisit): apply() bind() Kaedah ini membolehkan penetapan eksplisit

.

this

: menyerahkan fungsi dengan segera, meluluskan argumen secara individu.
• call()
: Sama seperti
• , tetapi lulus argumen sebagai array. apply() call()
: Mengembalikan fungsi baru dengan
• terikat pada objek tertentu. bind() this

Contoh:

<code class="language-javascript">const book = {
  title: 'JavaScript Mastery',
  showTitle: function() {
    console.log(this.title);
  }
};
book.showTitle(); // Output: JavaScript Mastery</code>

8. Pendengar Acara:

dalam pendengar acara,

biasanya merujuk kepada elemen yang mencetuskan peristiwa.

this

Contoh:

<code class="language-javascript">const techBook = {
  title: 'Advanced JavaScript',
  showTitle: function() {
    const arrowFunc = () => {
      console.log(this.title);
    };
    arrowFunc();
  }
};
techBook.showTitle(); // Output: Advanced JavaScript</code>

Order of Precedence:

Pengikatan baru

1. mengikat eksplisit
2. mengikat tersirat
3. mengikat lalai

Kesimpulan:

menguasai

adalah penting untuk menulis JavaScript yang bersih dan konteks. Walaupun pada mulanya mencabar, memahami tingkah lakunya dalam senario yang berbeza memberi anda kuasa untuk menulis kod yang lebih berkesan dan boleh dipelihara. Amalan adalah kunci! Kongsi pengalaman anda dengan

dalam komen di bawah! this

Atas ialah kandungan terperinci Memahami 'ini' dalam JavaScript dan kelakuannya dalam pelbagai senario. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!