A kontextus alapjai JavaScriptben

Tegyük fel, hogy van egy func függvényünk, amelyben a this van használva:

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

Mire mutat a this ebben a függvényben? Mi nem tudjuk. És a JavaScript sem tudja. És maga a függvény sem tudja. Vagyis a függvény létrehozásakor az, hogy pontosan mire mutat a this, nincs meghatározva. És csak akkor határozódik meg, amikor ez a függvény meghívásra kerül.

Tegyük fel, hogy van egy bemeneti mezőnk:

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

Kössük ehhez a bemeneti mezőhöz a func függvényünket úgy, hogy akkor fusson le, amikor a mező elveszti a fókuszt. Most a függvény végrehajtásakor a this a mi bemeneti mezőnkre fog mutatni:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // a fókuszvesztéskor kiírja 'text'-et
}

De lehet, hogy nem egy bemeneti mezőnk van, hanem több:

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

És ezek mindegyikéhez hozzáköthetjük a func függvényünket. Ebben az esetben az első elem esetén a this a függvény végrehajtásakor rá fog mutatni, a második elem esetén pedig rá.

A gyakorlatban ez azt jelenti, hogy a this a függvényen belül attól függ, hogy melyik bemeneti mezőn vesztettük el a fókuszt:

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

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

function func() {
	console.log(this.value); // vagy 'text1'-et, vagy 'text2'-t írja ki
}

Összességében ez a this sajátossága nagyon kényelmes - csak egy függvényt hozunk létre és bármennyi bemeneti mezőhöz hozzákötjük. Ha a this nem mutatna arra az elemre, ahol az esemény bekövetkezett, akkor ez sem sikerülne - minden egyes bemeneti mezőhöz saját, ugyanazzal a kóddal rendelkező függvényt kellene létrehoznunk!