Konteksti töötamise põhitõed JavaScriptis

Oletame, et meil on mingi funktsioon func, mille sees kasutatakse this:

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

Millele osutab this selles funktsioonis? Me ei tea. Ja JavaScript ei tea. Ja funktsioon ise ei tea. See tähendab, et funktsiooni loomise hetkel pole see, millele this täpselt osutab, määratletud. Ja see saab määratletuks alles siis, kui seda funktsiooni kutsutakse.

Oletame, et meil on mingi sisendväli:

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

Seome selle sisendväljaga oma funktsiooni func nii, et see käivitub sisendvälja fookuse kaotamisel. Nüüd funktsiooni käivitumise hetkel this osutab meie sisendväljale:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // fookuse kaotamisel kuvab 'text'
}

Kuid meil võib olla mitte üks sisendväli, vaid mitu:

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

Ja me võime seoma oma funktsiooni func igaühega neist sisendväliadest. Sel juhul esimese elemendi puhul this funktsiooni käivitumise hetkel osutab sellele, ja teise puhul - sellele.

Praktikas tähendab see, et this funktsiooni sees sõltub sellest, millisel sisendväljal me kaotasime fookuse:

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

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

function func() {
	console.log(this.value); // kuvab kas 'text1' või 'text2'
}

Üldiselt on selline this omadus väga mugav - loome vaid ühe funktsiooni ja seome selle suvalise arvu sisendväliadega. Kui this ei osutaks sellele elemendile, milles sündmus toimus, siis meil ei õnnestuks see - peaksime iga sisendvälja jaoks looma oma funktsiooni sama koodiga!