Eroarea lui this în gestionarul de evenimente cu funcție săgeată JavaScript

În ultimul timp a devenit la modă să folosești peste tot funcții săgeată în locul celor obișnuite. Aceste funcții, totuși, au un capcană - ele nu păstrează this. Să vedem cu ce problemă ne putem confrunta din cauza acestui lucru.

Să presupunem că avem un buton:

<button>text</button>

Să obținem o referință la acest buton într-o variabilă:

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

Să atașăm un gestionar de evenimente butonului, folosind o funcție săgeată:

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

Aici ne așteaptă surpriza: this în funcția săgeată nu se va referi la elementul în care a avut loc evenimentul.

Să vedem ce putem face în legătură cu asta.

Soluția prima

Poți renunța la utilizarea lui this și să folosești variabila căreia îi este atașat evenimentul:

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

Soluția a doua

Poți obține elementul căruia îi este atașat evenimentul prin event.target:

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

Soluția a treia

Poți renunța la funcția săgeată și să folosești una obișnuită:

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