Základy práce s kontextom v JavaScripte

Majme nejakú funkciu func, vnútri ktorej sa používa this:

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

Na čo ukazuje this v tejto funkcii? My nevieme. A JavaScript nevie. A ani sama funkcia nevie. To znamená, že v momente vytvorenia funkcie to, na čo presne ukazuje this, nie je definované. A definuje sa to až vtedy, keď sa táto funkcia zavolá.

Majme nejaký input:

<input id="elem" value="text">

Previažme k tomuto inputu našu funkciu func tak, aby sa vykonala pri strate focusu inputom. Teraz v momente vykonania funkcie this bude ukazovať na náš input:

let elem = document.querySelector('#elem');

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // pri strate focusu vypíše 'text'
}

Ale veď my môžeme mať nie jeden input, ale niekoľko:

<input id="elem1" value="text1">
<input id="elem2" value="text2">

A na každý z týchto inputov môžeme pripojiť našu funkciu func. V tomto prípade pre prvý element this v momente volania funkcie bude ukazovať na neho a pre druhý - na neho.

V praxi to znamená, že this vnútri funkcie závisí od toho, na ktorom z inputov sme stratili focus:

let elem1 = document.querySelector('#elem1');
elem1.addEventListener('blur', func);

let elem2 = document.querySelector('#elem2');
elem2.addEventListener('blur', func);

function func() {
	console.log(this.value); // vypíše buď 'text1', alebo 'text2'
}

Vo všeobecnosti je táto vlastnosť this veľmi výhodná - vytvoríme len jednu funkciu a pripojíme ju na ľubovoľný počet inputov. Keby this neukazoval na ten element, v ktorom nastala udalosť, tak by sa nám to nepodarilo - museli by sme pre každý input vytvoriť svoju vlastnú funkciu s rovnakým kódom!