Chyba this v šipkovém obslužném programu JavaScript

V poslední době se stalo módní používat všude šipkové funkce místo obyčejných. Tyto funkce však mají háček - neuchovávají this. Pojďme se podívat, na jaký problém můžeme kvůli tomu narazit.

Předpokládejme, že máme tlačítko:

<button>text</button>

Získáme odkaz na toto tlačítko do proměnné:

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

Přidáme na tlačítko obslužný program události pomocí šipkové funkce:

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

Zde na nás čeká překvapení: this v šipkové funkci nebude odkazovat na element, ve kterém událost nastala.

Pojďme se podívat, co se s tím dá dělat.

Řešení první

Můžeme se vzdát používání this a použít proměnnou, na kterou je událost navázána:

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

Řešení druhé

Můžeme získat element, na který je událost navázána, pomocí event.target:

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

Řešení třetí

Můžeme se vzdát šipkové funkce a použít obyčejnou:

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