Výhoda this v JavaScripte

Z doterajšieho vysvetlenia nie je úplne zrejmá špeciálna výhoda this. Veď vo vnútri obslužnej funkcie bude náš element dostupný – premenná elem bude globálna pre našu funkciu func:

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

function func() {
  // tu je dostupná premenná elem s našim elementom
}

A nie je ťažké si uvedomiť, že obsah this a obsah premennej elem v našom prípade sú rovnaké:

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

function func() {
  console.log(elem === this); // vypíše true
}

V čom je teda špeciálna výhoda this? Prejaví sa, keď máme viacero elementov, a ku každému je priradená tá istá funkcia.

Pozrime sa na príklad. Majme 3 tlačidlá:

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

Získame odkazy na ne do premenných:

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

Priradíme k týmto tlačidlám rovnakú funkciu:

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

A vo vnútri funkcie budeme vypisovať this.value:

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

Dopadne to tak, že máme tri tlačidlá. Kliknutie na každé tlačidlo povedie k zavolaniu funkcie func. Pritom pri každom kliku this bude obsahovať odkaz na to tlačidlo, v ktorom udalosť nastala.

To znamená, že každé kliknutie vypíše do konzoly value toho tlačidla, na ktorom nastalo kliknutie, ale robiť to bude jedna a tá istá funkcia func! To je výhoda použitia this.