Błąd this w strzałkowej funkcji obsługi zdarzeń JavaScript

Ostatnio stało się modne używanie wszędzie funkcji strzałkowych zamiast zwykłych. Funkcje te mają jednak haczyk - nie zachowują this. Przyjrzyjmy się, z jakim problemem można się z tym spotkać.

Załóżmy, że mamy przycisk:

<button>text</button>

Pobierzmy referencję do tego przycisku do zmiennej:

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

Dodajmy do przycisku procedurę obsługi zdarzenia, korzystając z funkcji strzałkowej:

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

Tutaj właśnie czeka na nas niespodzianka: this w funkcji strzałkowej nie będzie odnosić się do elementu, w którym wystąpiło zdarzenie.

Zobaczmy, co można z tym zrobić.

Rozwiązanie pierwsze

Można zrezygnować z używania this i skorzystać ze zmiennej, do której przypisane jest zdarzenie:

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

Rozwiązanie drugie

Można pobrać element, do którego przypisane jest zdarzenie, przez event.target:

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

Rozwiązanie trzecie

Można zrezygnować z funkcji strzałkowej i użyć zwykłej funkcji:

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