Het voordeel van this in JavaScript

Uit wat eerder gezegd is, is het speciale voordeel van this nog niet duidelijk. Immers, binnen de event handler functie zal ons element toch beschikbaar zijn - de variabele elem zal globaal zijn voor onze functie func:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	// hier is de variabele elem met ons element beschikbaar
}

En, het is niet moeilijk te bedenken dat de inhoud van this en de inhoud van de variabele elem in ons geval gelijk zijn:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	console.log(elem === this); // geeft true weer
}

Wat is dan het speciale voordeel van this? Het komt naar voren wanneer we meerdere elementen hebben, en aan elk dezelfde functie is gekoppeld.

Laten we een voorbeeld bekijken. Stel we hebben 3 knoppen:

<input id="button1" type="submit" value="text1">
<input id="button2" type="submit" value="text2">
<input id="button3" type="submit" value="text3">

Laten we verwijzingen naar hen in variabelen krijgen:

let button1 = document.querySelector('#button1');
let button2 = document.querySelector('#button2');
let button3 = document.querySelector('#button3');

Laten we dezelfde functie aan deze knoppen koppelen:

button1.addEventListener('click', func);
button2.addEventListener('click', func);
button3.addEventListener('click', func);

En binnen de functie zullen we this.value uitvoeren:

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

Het resultaat is dat we drie knoppen hebben. Klikken op elke knop zal leiden tot het aanroepen van de functie func. Hierbij zal bij elke klik this een verwijzing bevatten naar de knop waar het gebeurde plaatsvond.

Dat wil zeggen, elke klik zal in de console value van de knop waarop geklikt werd weergeven, maar dit zal gedaan worden door één en dezelfde functie func! Dat is het voordeel van het gebruik van this.

Er zijn 5 alinea's met enkele teksten. Bij klik op een willekeurige alinea, voeg aan het einde van zijn tekst een uitroepteken toe.

Er zijn 3 inputvelden, waarin enkele getallen staan. Bij verlies van focus in een willekeurig inputveld, verhef het getal dat erin staat tot de tweede macht.