Fejl med this i JavaScript pilfunktions-eventhandler

På det seneste er det blevet moderne at bruge pilfunktioner overalt i stedet for almindelige funktioner. Disse funktioner har dog en ulempe - de bevarer ikke this. Lad os se, hvilket problem man kan støde på på grund af dette.

Lad os sige, at vi har en knap:

<button>text</button>

Lad os få en reference til denne knap i en variabel:

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

Lad os tilføje en eventhandler til knappen ved at bruge en pilfunktion:

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

Det er her, overraskelsen venter: this i pilfunktionen vil ikke referere til elementet, hvor eventet fandt sted.

Lad os se, hvad vi kan gøre ved det.

Løsning et

Man kan droppe brugen af this og i stedet bruge variablen, som eventet er bundet til:

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

Løsning to

Man kan få elementet, som eventet er bundet til, gennem event.target:

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

Løsning tre

Man kan droppe pilfunktionen og bruge en almindelig funktion i stedet:

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