Napaka this v JavaScript streličnem obravnavalniku

V zadnjem času je postalo modno uporabljati povsod strelične funkcije namesto običajnih. Vendar imajo te funkcije past - ne ohranijo this. Poglejmo, s kakšno težavo se lahko srečamo zaradi tega.

Recimo, da imamo gumb:

<button>text</button>

Pridobimo referenco na ta gumb v spremenljivko:

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

Dodajmo gumbu obravnavalca dogodka, z uporabo strelične funkcije:

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

Tu nas čaka presenečenje: this v strelični funkciji ne bo referencial na element, v katerem se je dogodek zgodil.

Poglejmo, kaj lahko naredimo glede tega.

Rešitev prva

Lahko opustimo uporabo this in uporabimo spremenljivko, na katero je vezan dogodek:

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

Rešitev druga

Element, na katerega je vezan dogodek, lahko dobimo preko event.target:

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

Rešitev tretja

Lahko opustimo strelično funkcijo in uporabimo običajno:

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