A this hiba a JavaScript nyíl függvényes eseménykezelőjében

Az utóbbi időben divatossá vált, hogy mindenhol nyíl függvényeket használunk a szokásos függvények helyett. Ezeknek a függvényeknek azonban van egy csapdája - nem őrzik meg a this értékét. Nézzük meg, milyen problémába futhatunk emiatt.

Tegyük fel, hogy van egy gombunk:

<button>szöveg</button>

Szerezzük meg a gombra mutató hivatkozást egy változóban:

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

Rendeljünk hozzá egy eseménykezelőt a gombhoz, nyíl függvényt használva:

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

Itt ér minket a meglepetés: a this a nyíl függvényben nem fog az elemre hivatkozni, amiben az esemény bekövetkezett.

Nézzük meg, mit tehetünk ez ellen.

Első megoldás

Le lehet mondani a this használatáról, és használhatjuk azt a változót, amelyhez az esemény kötve van:

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

Második megoldás

Megkaphatjuk az elemet, amelyhez az esemény kötve van, a event.target segítségével:

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

Harmadik megoldás

Le lehet mondani a nyíl függvényről, és használhatunk szokásos függvényt:

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