Keunggulan this dalam JavaScript

Dari penjelasan sebelumnya, keunggulan khusus this belum terlihat jelas. Bagaimanapun juga, di dalam fungsi penangan elemen kita akan tetap dapat diakses - karena variabel elem akan bersifat global untuk fungsi kita func:

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

function func() {
	// di sini variabel elem dengan elemen kita dapat diakses
}

Dan, mudah untuk disadari, bahwa isi dari this dan isi dari variabel elem dalam kasus kita adalah sama:

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

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

Lalu, di mana keunggulan khusus this? Itu terlihat ketika kita memiliki beberapa elemen, dan setiap elemen terikat dengan fungsi yang sama.

Mari kita lihat contohnya. Misalkan kita memiliki 3 tombol:

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

Dapatkan referensi ke mereka dalam variabel:

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

Ikatkan ke tombol-tombol ini fungsi yang sama:

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

Dan di dalam fungsi akan kita tampilkan this.value:

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

Hasilnya, kita memiliki tiga tombol. Penekanan pada setiap tombol akan menyebabkan pemanggilan fungsi func. Pada saat yang sama, pada setiap klik this akan berisi referensi ke tombol di mana peristiwa terjadi.

Artinya setiap penekanan akan menampilkan di konsol value dari tombol yang ditekan, tapi hal ini dilakukan oleh fungsi func yang sama! Di situlah keunggulan penggunaan this.

Diberikan 5 paragraf dengan beberapa teks. Saat diklik pada paragraf mana pun, tambahkan tanda seru di akhir teksnya.

Diberikan 3 input, yang di dalamnya tertulis beberapa angka. Saat kehilangan fokus di salah satu input, pangkatkan angka yang ada di dalamnya menjadi kuadrat.