this-i eelis JavaScriptis

Eelnevast ei ole veel ilmne eriline eelis this. Lõppude lõpuks on sündmustekäsitlaja funktsiooni sees meie element kättesaadav - ju muutuja elem on meie funktsiooni jaoks globaalne func:

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

function func() {
  // siin on kättesaadav muutuja elem meie elemendiga
}

Ja pole raske aru saada, et this sisu ja muutuja elem sisu meie juhul on võrdsed:

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

function func() {
  console.log(elem === this); // väljastab true
}

Mis on siis this eriline eelis? See ilmneb siis, kui meil on mitu elementi, ja igaühega on seotud sama funktsioon.

Vaatame näidet. Olgu meil 3 nuppu:

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

Saame nende viited muutujatesse:

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

Seome nende nuppudega sama funktsiooni:

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

Ja funktsiooni sees väljastame this.value:

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

Tulemuseks on, et meil on kolm nuppu. Iga nupu vajutamine kutsub välja funktsiooni func. Samal ajal iga kliki korral sisaldab this viidet sellele nupule, kus sündmus toimus.

See tähendab, et iga vajutus väljastab konsooli value sellest nupust, mida vajutati, kuid seda teeb üks ja sama funktsioon func! Selline ongi this kasutamise eelis.