Felet med this i JavaScripts arrow-funktionshändelsehanterare

På senare tid har det blivit mode att använda pilfunktioner överallt istället för vanliga. Dessa funktioner har dock en hake - de bevarar inte this. Låt oss se vilket problem man kan stöta på på grund av detta.

Låt oss säga att vi har en knapp:

<button>text</button>

Låt oss få en referens till denna knapp i en variabel:

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

Låt oss lägga till en händelsehanterare på knappen, genom att använda en arrow-funktion:

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

Det är här överraskningen väntar: this i arrow-funktionen kommer inte att referera till elementet där händelsen inträffade.

Låt oss se vad som kan göras åt detta.

Första lösningen

Man kan sluta använda this och använda variabeln som händelsen är bunden till:

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

Andra lösningen

Man kan få elementet som händelsen är bunden till via event.target:

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

Tredje lösningen

Man kan sluta använda arrow-funktionen och använda en vanlig funktion istället:

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