Základy práce s kontextem v JavaScriptu

Předpokládejme, že máme nějakou funkci func, uvnitř které se používá this:

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

Na co ukazuje this v této funkci? My nevíme. A JavaScript neví. A ani samotná funkce neví. To znamená, že v momentě vytvoření funkce není definováno, na co přesně this ukazuje. A definuje se to až tehdy, když je tato funkce volána.

Předpokládejme, že máme nějaký input:

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

Připojme k tomuto inputu naši funkci func tak, aby se provedla při ztrátě focusu inputu. Nyní v momentě provedení funkce bude this ukazovat na náš input:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // při ztrátě focusu vypíše 'text'
}

Ale my můžeme mít ne jeden input, ale několik:

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

A ke každému z těchto inputů můžeme připojit naši funkci func. V tomto případě pro první prvek bude this v momentě volání funkce ukazovat na něj, a pro druhý - na něj.

V praxi to znamená, že this uvnitř funkce závisí na tom, na kterém z inputů jsme ztratili 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', nebo 'text2'
}

Obecně je tato vlastnost this velmi pohodlná - vytvoříme pouze jednu funkci a připojíme ji k libovolnému počtu inputů. Kdyby this neukazoval na ten prvek, ve kterém nastala událost, tak by se nám to nepodařilo - museli bychom pro každý input vytvořit vlastní funkci se stejným kódem!