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:

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

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

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

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

Ikatkan ke tombol-tombol ini fungsi yang sama:

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

Dan di dalam fungsi akan kita tampilkan this.value:

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