De this-fout in JavaScript pijlfunctie-eventhandlers

Het is de laatste tijd in de mode geworden om overal pijlfuncties te gebruiken in plaats van gewone functies. Deze functies hebben echter een addertje onder het gras - ze behouden this niet. Laten we kijken naar een probleem waar je tegenaan kunt lopen vanwege dit.

Stel dat we een knop hebben:

<button>text</button>

We halen een referentie naar deze knop in een variabele:

let button = document.querySelector('button');

Laten we een eventhandler aan de knop toevoegen, met behulp van een pijlfunctie:

button.addEventListener('click', () => {
	console.log(this.textContent);
});

Hier wacht ons een verrassing: this in de pijlfunctie zal niet verwijzen naar het element waar de gebeurtenis plaatsvond.

Laten we kijken wat we hieraan kunnen doen.

Oplossing één

Je kunt stoppen met het gebruik van this en gebruikmaken van de variabele waaraan de gebeurtenis is gebonden:

button.addEventListener('click', () => {
	console.log(button.textContent);
});

Oplossing twee

Je kunt het element waaraan de gebeurtenis is gebonden, verkrijgen via event.target:

button.addEventListener('click', (event) => {
	console.log(event.target.textContent);
});

Oplossing drie

Je kunt de pijlfunctie laten varen en een gewone functie gebruiken:

button.addEventListener('click', function() {
	console.log(this.textContent);
});