Errore this nel gestore a freccia JavaScript

Ultimamente è diventato di moda utilizzare funzioni freccia ovunque al posto di quelle normali. Queste funzioni, tuttavia, hanno un inconveniente - non preservano il this. Diamo un'occhiata a quale problema si può incontrare a causa di ciò.

Supponiamo di avere un pulsante:

<button>text</button>

Otteniamo un riferimento a questo pulsante in una variabile:

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

Aggiungiamo un gestore di eventi al pulsante, utilizzando una funzione freccia:

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

È qui che ci aspetta una sorpresa: this nella funzione freccia non si riferirà all'elemento in cui si è verificato l'evento.

Vediamo cosa si può fare al riguardo.

Prima soluzione

Si può rinunciare all'uso di this e utilizzare la variabile a cui è associato l'evento:

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

Seconda soluzione

Si può ottenere l'elemento a cui è associato l'evento tramite event.target:

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

Terza soluzione

Si può rinunciare alla funzione freccia e utilizzare una funzione normale:

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