Vea "this" JavaScripti noolefunktsiooni sündmuse käitlajas

Viimasel ajal on moes kasutada kõikjal noolefunktsioone tavaliste funktsioonide asemel. Kuid neil funktsioonidel on varjatud oht - nad ei säilita this. Vaatame, millise probleemiga võime selle tõttu kokku puutuda.

Oletame, et meil on nupp:

<button>text</button>

Saame selle nupi viida muutujasse:

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

Seome nupule sündmuse käitlaja, kasutades noolefunktsiooni:

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

Siin ootabki meid üllatus: this noolefunktsioonis ei viita elemendile, milles sündmus toimus.

Vaatame, mida sellega teha saab.

Esimene lahendus

Võib loobuda this kasutamisest ja kasutada muutujat, millega sündmus on seotud:

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

Teine lahendus

Saab sündmusega seotud elemendi läbi event.target:

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

Kolmas lahendus

Võib loobuda noolefunktsioonist ja kasutada tavalist funktsiooni:

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