Dalam JavaScript, tingkah laku ini bergantung kepada bagaimana fungsi dipanggil. ① Dalam panggilan fungsi biasa, ini menunjukkan objek global (tetingkap dalam penyemak imbas dan global dalam node.js), tetapi tidak ditentukan dalam mod yang ketat; ② Dalam kaedah objek, ini menunjukkan objek yang memanggil kaedah, tetapi jika kaedah itu dipanggil secara berasingan, ini mungkin kehilangan konteks; ③ Fungsi anak panah tidak mempunyai sendiri, yang diwarisi dari skop luar dan sesuai untuk mengekalkan konsistensi ini; ④ Gunakan .bind (), .call (), dan. Apply () untuk mengikat nilai ini secara eksplisit, yang digunakan untuk membuat fungsi mengikat, panggil dengan segera dan lulus parameter, hubungi segera dan lulus parameter dalam array. Kunci untuk memahami ini adalah bagaimana fungsi dipanggil dan bukannya bagaimana ia ditakrifkan.

Apabila anda bekerja dengan JavaScript, kata kunci this boleh menjadi salah satu konsep yang paling rumit untuk membungkus kepala anda. Ia tidak selalu merujuk kepada apa yang anda harapkan, terutamanya jika anda datang dari bahasa pengaturcaraan lain. Pendek kata: this merujuk kepada konteks di mana fungsi dipanggil - bukan di mana ia ditakrifkan.

Mari kita pecahkan ini ke dalam beberapa situasi yang sama supaya anda dapat memahami dengan lebih baik bagaimana this berlaku.

Bagaimana this berfungsi dalam fungsi biasa panggilan

Dalam panggilan fungsi biasa (bukan di dalam kaedah objek atau kelas), this biasanya menunjuk kepada objek global - yang dalam pelayar adalah window , dan dalam node.js adalah global . Tetapi jika anda menggunakan mod ketat ( "use strict" ), maka this undefined .

Contohnya:

 fungsi showThis () {
  console.log (ini);
}

showthis (); // dalam penyemak imbas: objek tetingkap (atau tidak ditentukan dalam mod yang ketat)

Oleh itu, jika anda melihat this menunjuk kepada sesuatu yang tidak dijangka seperti objek global, periksa jika fungsi itu dipanggil secara normal tanpa sebarang konteks.

Beberapa perkara yang perlu diperhatikan:

• Tingkah laku ini berubah apabila anda berada di dalam fungsi anak panah (kami akan sampai kepada itu).
• Sekiranya anda mengikat pengendali acara atau panggilan balik, kadang -kadang this kehilangan konteks yang dimaksudkan melainkan dengan jelas terikat.

Kaedah Objek Dalam this

Apabila fungsi adalah sebahagian daripada objek (kaedah), this merujuk kepada objek yang memiliki kaedah. Itu masuk akal kerana anda memanggil fungsi dalam konteks objek itu.

Contoh:

 const user = {
  Nama: "Alice",
  salam () {
    console.log (`Hello, $ {this.name}`);
  }
};

user.greet (); // Hello, Alice

Di sini, this merujuk kepada user kerana kaedah itu digunakan pada objek tersebut. Tetapi berhati -hati untuk gotchas ini:

• Jika anda mengekstrak kaedah dan memanggilnya secara berasingan, this mungkin menjadi undefined atau menunjuk kepada objek global.

   const sisthi = user.greet;
  kataHi (); // hello, undefined (dalam mod yang ketat)

• Anda boleh membetulkannya dengan mengikat kaedah dengan jelas dengan .bind(user) atau menggunakan fungsi anak panah di dalam kaedah.

Fungsi anak panah dan this

Fungsi anak panah tidak mempunyai this sendiri. Sebaliknya, mereka mewarisi this dari konteks leksikal di sekelilingnya-pada dasarnya, fungsi tidak terdekat yang tidak ada di sekelilingnya.

Ini sangat berguna ketika menulis panggilan balik di dalam Kaedah:

 const user = {
  Nama: "Bob",
  salam () {
    setTimeout (() => {
      console.log (`Hi, $ {this.name}`);
    }, 1000);
  }
};

user.GreetLater (); // hi, bob

Jika kami telah menggunakan fungsi biasa dan bukannya fungsi anak panah di dalam setTimeout , this akan menunjuk kepada objek global atau undefined , bergantung kepada mod yang ketat.

Jadi ingat:

• Fungsi anak panah sangat bagus untuk menjaga this konsisten
• Mereka tidak sesuai sebagai kaedah objek jika anda perlu mengakses objek melalui this

Menukar this dengan mengikat, memanggil, dan memohon

Kadang -kadang anda mahu mengawal apa yang dirujuk this . Untuk itu, JavaScript memberi kita tiga alat: .call() , .apply() , dan .bind() .

• .call(obj, arg1, arg2...) menjalankan fungsi dengan segera dengan spesifik this
• .apply(obj, [args]) adalah serupa tetapi mengambil argumen sebagai array
• .bind(obj) mengembalikan fungsi baru dengan set this secara kekal

Gunakan contoh kes:

 Fungsi Pengenalan (Lang) {
  console.log (`$ {this.name} tahu $ {lang}`);
}

const orang = {name: "John"};

memperkenalkan.call (orang, "JavaScript"); // John tahu javascript
memperkenalkan.apply (orang, ["python"]); // John tahu python

const boundIntro = qenent.bind (orang);
BoundIntro ("Java"); // John tahu java

Kaedah ini sangat membantu apabila meminjam kaedah dari objek lain atau menubuhkan pengendali acara.

Itulah idea umum di sebalik bagaimana this berfungsi dalam JavaScript. Ini semua tentang di mana dan bagaimana fungsi dipanggil - bukan di mana ia ditulis. Terus berlatih dan perhatikan bagaimana perubahan konteks dalam senario yang berbeza. Sebaik sahaja anda terbiasa dengan peraturan, ia menjadi lebih diramalkan.

Pada dasarnya itu sahaja.

Atas ialah kandungan terperinci Bagaimana kata kunci ini berfungsi dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!