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:

let 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:

let 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:

<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:

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

Kaitkan fungsi yang sama dengan tombol-tombol ini:

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

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

function 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.

Diberi 5 perenggan dengan beberapa teks. Apabila klik pada mana-mana perenggan, tambahkan tanda seru pada akhir teksnya.

Diberi 3 input, di mana beberapa nombor telah ditulis. Apabila kehilangan fokus dalam mana-mana input, kuasa duakan nombor yang terdapat di dalamnya.