Výhoda this v JavaScriptu

Z toho, co bylo řečeno dříve, zatím není zřejmá speciální výhoda this. Vždyť uvnitř funkce-obsluhy bude náš element přístupný – proměnná elem bude globální pro naši funkci func:

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

function func() {
	// zde je přístupná proměnná elem s naším elementem
}

A není těžké si uvědomit, že obsah this a obsah proměnné elem v našem případě jsou stejné:

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

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

V čem je tedy speciální výhoda this? Projeví se, když máme více elementů, a ke každému je připojena jedna a ta samá funkce.

Podívejme se na příklad. Předpokládejme, že máme 3 tlačítka:

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

Získáme odkazy na ně do proměnných:

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

Připojíme k těmto tlačítkům stejnou funkci:

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

A uvnitř funkce budeme vypisovat this.value:

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

Dopadne to tak, že máme tři tlačítka. Kliknutí na každé tlačítko povede k zavolání funkce func. Přitom při každém kliku bude this obsahovat odkaz na to tlačítko, ve kterém událost nastala.

To znamená, že každé kliknutí vypíše do konzole value toho tlačítka, na kterém nastalo kliknutí, ale dělat to bude jedna a ta samá funkce func! To je výhoda používání this.

Je dáno 5 odstavců s nějakými texty. Po kliknutí na jakýkoli odstavec zapište na konec jeho textu vykřičník.

Jsou dána 3 vstupní pole, ve kterých jsou zapsána nějaká čísla. Při ztrátě fokusu v jakémkoli ze vstupních polí umocněte v něm stojící číslo na druhou.