Apa itu & quot; this & quot; Kata kunci dalam JavaScript, dan bagaimanakah perubahan nilainya bergantung pada konteksnya?

Memahami kata kunci "ini" dalam javascript

Kata kunci this dalam JavaScript merujuk kepada objek yang melaksanakan fungsi semasa. Nilainya tidak tetap dan perubahan dinamik bergantung kepada bagaimana fungsi dipanggil. Adalah penting untuk memahami tingkah laku dinamik ini untuk mengelakkan kesilapan biasa dalam pengaturcaraan JavaScript. Nilai this ditentukan semasa runtime , bukan pada masa penyusunan. Ini bermakna nilainya diputuskan berdasarkan konteks di mana fungsi itu digunakan. Tidak ada definisi statik tunggal; Sebaliknya, ia bergantung kepada empat konteks utama:

1. Konteks Global: Dalam persekitaran mod bukan tegas, jika fungsi dipanggil tanpa dikaitkan dengan objek (contohnya, panggilan fungsi mandiri), this sering merujuk kepada objek global (tetingkap dalam pelayar, atau global dalam node.js). Dalam mod yang ketat ( 'use strict'; ), this tidak akan undefined dalam senario ini.
2. Kaedah Konteks: Apabila fungsi dipanggil sebagai kaedah objek (misalnya, object.method() ), this merujuk kepada objek itu sendiri. Ini adalah penggunaan yang paling biasa dan mudah.
3. Konteks Pembina: Di dalam fungsi pembina yang dipanggil dengan kata kunci new , this merujuk kepada contoh objek yang baru dibuat. Ini adalah asas kepada pengaturcaraan berorientasikan objek dalam JavaScript.
4. Mengikat Eksplisit: Anda secara jelas boleh menetapkan nilai this menggunakan kaedah seperti call() , apply() , dan bind() . Kaedah ini membolehkan anda menggunakan fungsi dengan nilai this yang ditentukan, mengatasi penentuan konteks lalai.

Anak panah berfungsi dan mengikat ini

Ya, fungsi anak panah ( => ) menawarkan kelebihan yang signifikan dalam menguruskan pengikatan this . Tidak seperti fungsi biasa, fungsi anak panah tidak mempunyai this mereka sendiri. Sebaliknya, mereka secara leksikal mengikat this ke skop sekitar (melampirkan). Ini bermakna nilai this di dalam fungsi anak panah ditentukan oleh mana fungsi anak panah ditakrifkan , bukan di mana ia dipanggil. Tingkah laku ini menghapuskan banyak perangkap yang berkaitan dengan this .

Contohnya:

 <code class="javascript">const obj = { method: function() { setTimeout(function() { // Regular function, this will be the global object console.log(this); }, 1000); setTimeout(() => { // Arrow function, this will be obj console.log(this); }, 1000); } }; obj.method();</code>

Dalam kod ini, panggilan balik setTimeout biasa mungkin akan log objek global, manakala panggilan balik fungsi anak panah akan log objek obj dengan betul. Ini kerana fungsi anak panah mewarisi nilai this dari skop sekitarnya (fungsi method ).

Fungsi langsung panggilan vs kaedah penyerahan kaedah

Nilai this berbeza dengan ketara apabila fungsi dipanggil secara langsung berbanding apabila ia dipanggil sebagai kaedah.

• Panggilan fungsi langsung: Seperti yang dijelaskan di atas, dalam mod bukan tegas, this sering menunjuk kepada objek global; Dalam mod yang ketat, ia undefined .
• Kaedah penyerahan: Apabila fungsi dipanggil sebagai kaedah objek (misalnya, myObject.myMethod() ), this merujuk kepada objek ( myObject dalam kes ini).

Pertimbangkan contoh ini:

 <code class="javascript">function myFunction() { console.log(this); } const myObject = { myMethod: myFunction }; myFunction(); // this likely refers to the global object (or undefined in strict mode) myObject.myMethod(); // this refers to myObject</code>

Menguruskan "ini" dalam aplikasi yang kompleks

Menguruskan this dalam aplikasi JavaScript yang besar memerlukan perancangan yang teliti dan amalan pengekodan yang konsisten. Berikut adalah beberapa strategi biasa:

• Fungsi Arrow: Gunakan fungsi anak panah secara bebas apabila mungkin, terutamanya dalam panggilan balik dan pengendali acara, untuk mengelakkan masalah mengikat this .
• Mengikat eksplisit ( .bind() , .call() , .apply() ): Gunakan kaedah ini untuk secara eksplisit menetapkan nilai this apabila perlu, terutamanya apabila melewati fungsi sebagai panggilan balik atau argumen. bind() mewujudkan fungsi baru dengan nilai this secara kekal terikat; call() dan apply() memohon fungsi dengan segera dengan nilai this yang dinyatakan.
• Kelas: Menggunakan kelas ES6 menyediakan cara yang lebih bersih dan lebih berstruktur untuk this dalam kod berorientasikan objek. Kata kunci this dalam kaedah kelas dengan betul merujuk kepada contoh kelas.
• Perpustakaan Pemeliharaan Konteks: Beberapa perpustakaan seperti Lodash menawarkan fungsi utiliti yang membantu menguruskan konteks dan panggilan balik dengan lebih berkesan.
• Gaya pengekodan yang konsisten: Menetapkan garis panduan yang jelas untuk menggunakan this dalam pasukan anda untuk menggalakkan konsistensi dan mengurangkan kesilapan. Elakkan bergantung kepada implikasinya yang mengikat this di mana mungkin. Memihak kepada fungsi pengikatan atau anak panah yang jelas untuk kejelasan dan kebolehprediksi.

Dengan menggunakan strategi ini, anda dapat mengurangkan risiko tingkah laku yang tidak dijangka yang berkaitan dengan kata kunci this dalam aplikasi JavaScript anda, yang membawa kepada kod yang lebih mantap dan boleh dipelihara.

Atas ialah kandungan terperinci Apa itu & quot; this & quot; Kata kunci dalam JavaScript, dan bagaimanakah perubahan nilainya bergantung pada konteksnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!