Osnove dela s kontekstom v JavaScript

Recimo, da imamo neko funkcijo func, znotraj katere se uporablja this:

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

Na kaj kaže this v tej funkciji? Mi ne vemo. In JavaScript ne ve. In tudi funkcija sama ne ve. To pomeni, da v trenutku ustvarjanja funkcije ni določeno, na kaj točno kaže this. In to se določi šele takrat, ko bo ta funkcija poklicana.

Recimo, da imamo nek vnos:

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

Povežimo to funkcijo func s tem vnosom tako, da se izvede ob izgubi fokusa vnosa. Zdaj bo v trenutku izvajanja funkcije this kazal na naš vnos:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // ob izgubi fokusa izpiše 'text'
}

Toda navsezadnje imamo lahko ne en vnos, ampak več:

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

In na vsakega od teh vnosov lahko povežemo našo funkcijo func. V tem primeru bo za prvi element this v trenutku klica funkcije kazal nanj, za drugega pa - nanj.

V praksi to pomeni, da this znotraj funkcije je odvisen od tega, na katerem vnosu smo izgubili fokus:

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

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

function func() {
	console.log(this.value); // izpiše bodisi 'text1' ali 'text2'
}

Na splošno je ta lastnost this zelo priročna - ustvarimo samo eno funkcijo in jo povežemo s poljubnim številom vnosov. Če this ne bi kazal na tisti element, v katerem se je zgodil dogodek, potem mi tega ne bi uspelo - morali bi za vsak vnos ustvariti svojo funkcijo z enako kodo!