Kelebihan this dalam JavaScript

Daripada apa yang telah dibincangkan sebelum ini, kelebihan khas this masih belum jelas. Lagipun, di dalam fungsi pengendali (handler), elemen kita sepatutnya boleh diakses - kerana pembolehubah elem akan menjadi global untuk fungsi kita func:

javascriptlet elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
  // pembolehubah elem dengan elemen kita boleh diakses di sini
}

Dan, mudah untuk difahami, bahawa kandungan this dan kandungan pembolehubah elem dalam kes kami adalah sama:

javascriptlet elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
  console.log(elem === this); // akan memaparkan true
}

Apakah sebenarnya kelebihan khas this? Ia terserlah apabila kita mempunyai beberapa elemen, dan setiap satu daripadanya dikaitkan dengan fungsi yang sama.

Mari lihat contoh. Katakan kita mempunyai 3 tombol:

html<input id="button1" type="submit" value="text1">
<input id="button2" type="submit" value="text2">
<input id="button3" type="submit" value="text3">

Dapatkan pautan kepada mereka dalam pembolehubah:

javascriptlet button1 = document.querySelector('#button1');
let button2 = document.querySelector('#button2');
let button3 = document.querySelector('#button3');

Kaitkan fungsi yang sama dengan tombol-tombol ini:

javascriptbutton1.addEventListener('click', func);
button2.addEventListener('click', func);
button3.addEventListener('click', func);

Dan di dalam fungsi, kami akan outputkan this.value:

javascriptfunction func() {
  console.log(this.value);
}

Jadi, kami mempunyai tiga tombol. Klik pada setiap tombol akan menyebabkan pemanggilan fungsi func. Pada masa yang sama, untuk setiap klik, this akan mengandungi pautan kepada tombol di mana peristiwa itu berlaku.

Iaitu, setiap klik akan memaparkan dalam konsol value bagi tombol yang diklik, tetapi ia akan dilakukan oleh fungsi yang sama func! Itulah kelebihan menggunakan this.