Grunnleggende om kontekst i JavaScript

La oss si at vi har en funksjon func, innenfor hvor this brukes:

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

Hva peker this på i denne funksjonen? Det vet vi ikke. Og JavaScript vet ikke. Og selve funksjonen vet ikke. Det vil si at i øyeblikket funksjonen opprettes, er det ikke bestemt hva this peker på. Og dette vil bare bli bestemt når funksjonen kalles.

La oss si at vi har et input-felt:

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

La oss knytte funksjonen vår func til dette input-feltet så den utføres når input-feltet mister fokus. Nå, i øyeblikket funksjonen utføres, vil this peke på input-feltet vårt:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // vil skrive ut 'text' ved tap av fokus
}

Men vi kan jo ha ikke bare ett input-felt, men flere:

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

Og til hvert av disse input-feltene kan vi knytte funksjonen vår func. I dette tilfellet vil this for det første elementet i kalløyeblikket peke på det, og for det andre - på det.

I praksis betyr dette at this inni funksjonen avhenger av hvilket input-felt mister 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); // vil skrive ut enten 'text1' eller 'text2'
}

I utgangspunktet er denne egenskapen til this veldig praktisk - vi oppretter bare én funksjon og knytter den til et hvilket som helst antall input-felter. Hvis this ikke pekte på det elementet der hendelsen inntraff, ville vi ikke klart dette - vi ville måttet opprette en egen funksjon for hvert input-felt med den samme koden!