Basiswerk met context in JavaScript

Stel we hebben een functie func, waarin this wordt gebruikt:

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

Waar verwijst this naar in deze functie? Dat weten we niet. En JavaScript weet het niet. En de functie zelf weet het niet. Dat betekent dat op het moment van het maken van de functie, waar this precies naar verwijst, niet is gedefinieerd. En dit wordt alleen bepaald op het moment dat deze functie wordt aangeroepen.

Stel we hebben een inputveld:

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

Laten we onze functie func aan dit inputveld binden zodat deze wordt uitgevoerd wanneer het inputveld de focus verliest. Nu zal op het moment van uitvoeren van de functie this verwijzen naar ons inputveld:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // bij verlies van focus wordt 'text' uitgevoerd
}

Maar we kunnen niet één inputveld hebben, maar meerdere:

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

En aan elk van deze inputvelden kunnen we onze functie func binden. In dit geval zal voor het eerste element this op het moment van aanroepen van de functie naar het eerste element wijzen, en voor het tweede - naar het tweede.

In de praktijk betekent dit dat this binnen de functie afhangt van op welk inputveld we de focus verliezen:

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

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

function func() {
	console.log(this.value); // geeft of 'text1' of 'text2' weer
}

Kortom, deze eigenschap van this is erg handig - we maken slechts één functie en binden deze aan elk willekeurig aantal inputvelden. Als this niet zou wijzen naar het element waarin de gebeurtenis plaatsvond, dan zou dat ons niet lukken - we zouden voor elk inputveld een eigen functie met dezelfde code moeten maken!