Langkah terakhir untuk menguasai kata kunci JavaScript ' s 'ini'

Penggunaan asas kata kunci JavaScript

telah dijelaskan dalam artikel sebelumnya. this Kunci untuk menunjuk adalah konteks runtime. Walau bagaimanapun, apabila konteks berubah melebihi jangkaan, masalah timbul. Artikel ini akan memberi tumpuan kepada keadaan ini dan bagaimana menyelesaikannya. this

mata teras

Kata kunci
• di JavaScript menunjukkan konteks pelaksanaan semasa, dan pemahamannya adalah penting untuk memanipulasi dan berinteraksi objek, terutamanya apabila pengaturcaraan berorientasikan objek atau menggunakan kerangka dan perpustakaan yang sangat bergantung pada this. this Masalah biasa dengan kata kunci
• termasuk penggunaan dalam kaedah yang diekstrak, fungsi panggil balik, dan penutupan. Masalah ini boleh diselesaikan dengan mengikat kata kunci this dengan jelas menggunakan kaedah bind(). this
ECMAScript 6 memperkenalkan fungsi anak panah yang mendapat nilai
• dari skop yang melampirkan langsung. Pengikatan leksikal fungsi anak panah tidak dapat ditimpa, menjadikannya penyelesaian yang lebih elegan untuk mengekalkan konteks yang betul. this Nilai this
bergantung kepada bagaimana fungsi dipanggil. Dalam kaedah,
• menunjuk kepada objek yang dimiliki; titik ke objek yang baru dibuat; this this this new Selesaikan Soalan Lazim this this call() Bahagian ini akan meneroka beberapa masalah yang paling biasa yang timbul apabila menggunakan kata kunci apply() dan belajar bagaimana menyelesaikannya. bind() this
1. Salah satu kesilapan yang paling biasa

cuba menetapkan kaedah objek kepada pembolehubah dan mengharapkan

untuk terus menunjuk kepada objek asal. Seperti yang ditunjukkan dalam contoh berikut, ini tidak berfungsi.

Walaupun

nampaknya menjadi rujukan kepada this, ia sebenarnya hanya satu lagi rujukan kepada

itu sendiri. Kami sudah tahu bahawa lokasi panggilan menentukan konteks, dan di sini lokasi panggilan adalah

, yang merupakan panggilan fungsi mudah. Untuk membuktikan bahawa menunjuk kepada fungsi tanpa asas (fungsi tidak terikat pada objek tertentu), tambah this di bahagian bawah kod dan anda akan melihat output berikut:

var car = {
  brand: "Nissan",
  getBrand: function() {
    console.log(this.brand);
  }
};

var getCarBrand = car.getBrand;

getCarBrand(); // 输出：undefined

getCarBrand mengandungi hanya satu fungsi normal, yang tidak lagi merupakan kaedah ahli objek car. Jadi dalam kes ini, this.brand sebenarnya ditukar kepada window.brand, sudah tentu ia tidak ditentukan. Jika kita mengekstrak kaedah dari objek, ia menjadi fungsi biasa sekali lagi. Sambungannya ke objek dipotong dan tidak lagi berfungsi seperti yang diharapkan. Dalam erti kata lain, fungsi yang diekstrak tidak terikat pada objek yang diperlukan. Jadi bagaimana kita membetulkannya? Jika kita ingin menyimpan rujukan kepada objek asal, kita perlu mengikat fungsi getBrand() dengan jelas ke objek getCarBrand apabila menyerahkan fungsi getBrand() kepada pembolehubah car. Kita boleh menggunakan kaedah bind() untuk mencapainya.

function(){
  console.log(this.brand);
}

Sekarang kita mendapat output yang betul kerana kita berjaya menetapkan semula konteks kepada apa yang kita mahu kelihatan seperti itu.

2. this Masalah seterusnya berlaku apabila kita lulus kaedah (menggunakan sebagai hujah) sebagai fungsi panggil balik. Contohnya:

Walaupun kita menggunakan this, kita sebenarnya hanya mendapatkan fungsi

yang dilampirkan pada objek butang. Parameter lulus ke fungsi adalah tugasan tersirat, jadi apa yang berlaku di sini hampir sama seperti dalam contoh sebelumnya. Perbezaannya ialah sekarang

var getCarBrand = car.getBrand.bind(car);
getCarBrand(); // 输出：Nissan

bukanlah tugasan yang jelas, tetapi tugasan tersirat. Hasilnya hampir sama - apa yang kita dapat ialah fungsi biasa yang terikat pada objek butang. Dalam erti kata lain, apabila kita melaksanakan kaedah pada objek, objek berbeza dari objek yang pada asalnya menentukan kaedah, dan kata kunci

tidak lagi menunjuk kepada objek asal, tetapi kepada objek yang dipanggil kaedah. Rujuk contoh kami: Kami melaksanakan car.getBrand pada getBrand() (elemen butang), bukannya objek car.getBrand yang ditakrifkan pada asalnya. Oleh itu, this tidak lagi menunjuk kepada el, tetapi untuk car.getBrand. Jika kita mahu menyimpan rujukan kepada objek asal yang tidak berubah, kita juga perlu mengikat fungsi car dengan jelas ke objek this menggunakan kaedah car. el bind() getBrand() sekarang semuanya berfungsi seperti yang diharapkan. car

var car = {
  brand: "Nissan",
  getBrand: function() {
    console.log(this.brand);
  }
};

var el = document.getElementById("btn");
el.addEventListener("click", car.getBrand);

3. Satu lagi keadaan di mana konteks

boleh salah ialah kita menggunakan

dalam penutupan. Pertimbangkan contoh berikut: this output di sini adalah

kerana fungsi penutupan (fungsi dalaman) tidak dapat mengakses pemboleh ubah

fungsi luaran. Hasil akhirnya ialah this sama dengan this, kerana

dalam fungsi dalaman terikat pada objek global. Untuk menyelesaikan masalah ini, kita perlu mengikat

el.addEventListener("click", car.getBrand.bind(car));

ke fungsi

. undefined this this.brand mengikat ini bersamaan dengan window.brand. Satu lagi cara yang popular untuk menetapkan penutupan adalah untuk menetapkan nilai this kepada pembolehubah lain, dengan itu menghalang perubahan yang tidak dijangka. this

var car = {
  brand: "Nissan",
  getBrand: function() {
    console.log(this.brand);
  }
};

var getCarBrand = car.getBrand;

getCarBrand(); // 输出：undefined

di sini, nilai this boleh ditugaskan untuk _this, that, self, me, my, context,

,

, , ,

,

, nama samaran objek, atau nama lain yang sesuai dengan anda. Kuncinya adalah untuk menyimpan rujukan kepada objek asal. this this function Penyelamat ECMAScript 6 => this new Dalam contoh terdahulu, kita melihat apa yang dipanggil "kaedah leksikal var self = this;" - apabila kita memberikan nilai

kepada pembolehubah lain. Dalam ECMAScript 6, kita boleh menggunakan teknik yang sama tetapi lebih elegan untuk mencapai ini dengan fungsi anak panah baru. Fungsi anak panah tidak dibuat oleh kata kunci

function(){
  console.log(this.brand);
}

, tetapi oleh pengendali "anak panah lemak" yang dipanggil (). Tidak seperti fungsi biasa, fungsi anak panah memperoleh nilai

dari skop mereka yang tertutup secara langsung. Pengikatan leksikal fungsi anak panah tidak boleh ditimpa, walaupun dengan pengendali . Sekarang mari kita lihat cara menggantikan pernyataan this menggunakan fungsi anak panah.

this Apa yang harus diingat tentang

• kita melihat kata kunci this, seperti mana -mana mekanisme lain, ikuti beberapa peraturan mudah, dan jika kita memahaminya dengan baik, kita boleh menggunakan mekanisme dengan lebih yakin. Oleh itu, mari kita lihat dengan cepat apa yang telah kita pelajari (dari artikel ini dan artikel sebelumnya):
  Dalam kes -kes berikut,
  • menunjuk kepada objek global:
  • Dalam konteks paling luar, di luar mana -mana blok fungsi.
  dalam fungsi yang bukan kaedah objek.
• dalam fungsi yang bukan pembina objek. this
• call() Apabila fungsi dipanggil sebagai harta benda induk, apply() menunjuk kepada objek induk. bind() this apabila fungsi dipanggil menggunakan null atau this atau
,
• menunjuk kepada parameter pertama yang diserahkan kepada kaedah ini. Jika parameter pertama adalah new atau bukan objek, maka this menunjuk kepada objek global.
• Apabila memanggil fungsi menggunakan operator this,
menunjuk ke objek yang baru dibuat.

Apabila menggunakan fungsi anak panah (diperkenalkan dalam ECMAScript 6), this bergantung kepada skop leksikal dan menunjuk kepada objek induk.

Ketahui peraturan yang mudah dan jelas ini, kita dapat dengan mudah meramalkan apa yang akan ditunjukkan oleh , dan jika bukan apa yang kita mahu, kita tahu kaedah apa yang boleh digunakan untuk memperbaikinya.

this Ringkasan this

kata kunci JavaScript's adalah konsep yang sukar untuk menguasai, tetapi anda boleh menguasai dengan hanya mengamalkan lebih banyak lagi. Saya harap artikel ini dan artikel saya yang terdahulu akan menjadi asas untuk pemahaman anda dan akan menjadi rujukan yang berharga apabila anda memberi anda sakit kepala. this

javascript

FAQs untuk kata kunci (Soalan Lazim)

(bahagian Soalan Lazim ditinggalkan di sini kerana terlalu lama dan sangat diduplikasi dengan kandungan sebelumnya. Bahagian FAQ telah dijelaskan secara terperinci lebih awal.)

Atas ialah kandungan terperinci Langkah terakhir untuk menguasai kata kunci JavaScript ' s 'ini'. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!