Feil med this i JavaScripts arrow-funksjons behandler

I det siste har det blitt mote å bruke pilfunksjoner overalt i stedet for vanlige. Disse funksjonene har imidlertid en ulempe - de beholder ikke this. La oss se på hvilket problem vi kan møte på grunn av dette.

La oss si at vi har en knapp:

<button>text</button>

La oss få en referanse til denne knappen i en variabel:

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

La oss legge til en hendelsesbehandler på knappen, ved å bruke en arrow-funksjon:

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

Det er her overraskelsen venter på oss: this i arrow-funksjonen vil ikke referere til elementet der hendelsen skjedde.

La oss se hva vi kan gjøre med dette.

Første løsning

Du kan slutte å bruke this og bruke variabelen som hendelsen er bundet til:

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

Andre løsning

Du kan få elementet som hendelsen er bundet til via event.target:

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

Tredje løsning

Du kan slutte å bruke arrow-funksjonen og bruke en vanlig funksjon i stedet:

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