Grundlæggende arbejde med kontekst i JavaScript

Lad os sige, at vi har en funktion func, inde i hvilken this bruges:

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

Hvad peger this på i denne funktion? Det ved vi ikke. Og JavaScript ved det ikke. Og selve funktionen ved det ikke. Det vil sige, at i øjeblikket hvor funktionen oprettes, er det, hvad this præcist peger på, ikke defineret. Og det vil først blive bestemt, når denne funktion bliver kaldt.

Lad os sige, at vi har et inputfelt:

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

Lad os knytte vores funktion func til dette inputfelt, så den udføres, når inputfeltet mister fokus. Nu vil this i udførelsens øjeblik pege på vores inputfelt:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // ved tab af fokus vil den udskrive 'text'
}

Men vi kan jo have ikke ét inputfelt, men flere:

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

Og til hver af disse inputfelter kan vi knytte vores funktion func. I dette tilfælde vil this for det første element, i funktionens kaldelsesøjeblik, pege på det, og for det andet - på det.

I praksis betyder det, at this inde i funktionen afhænger af, hvilket inputfelt der 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 udskrive enten 'text1' eller 'text2'
}

Generelt set er denne egenskab ved this meget bekvem - vi opretter kun én funktion og knytter den til et hvilket som helst antal inputfelter. Hvis this ikke pegede på det element, hvor begivenheden indtraf, ville vi ikke kunne gøre dette - vi ville være nødt til at oprette en separat funktion med den samme kode for hvert inputfelt!