Klaida this JavaScript rodykliniame doroklyje

Pastaruoju metu tapo madinga visur naudoti rodyklines funkcijas vietoj įprastų. Šios funkcijos, tačiau, turi spąstų - jos neišsaugo this. Pažiūrėkime, su kokią problema dėl to galima susidurti.

Tarkime, kad turime mygtuką:

<button>text</button>

Gaukime nuorodą į šį mygtuką į kintamąjį:

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

Priskirkime mygtukui įvykio doroklį, pasinaudoję rodykline funkcija:

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

Štai čia mūsų ir laukia staigmena: this rodyklinių funkcijoje nebus susijęs su elementu, kuriame įvyko įvykis.

Pažiūrėkime, ką su tuo galima padaryti.

Pirmasis sprendimas

Galima atsisakyti this naudojimo ir pasinaudoti kintamuoju, su kuriuo susietas įvykis:

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

Antrasis sprendimas

Galima gauti elementą, su kuriuo susietas įvykis, per event.target:

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

Trečiasis sprendimas

Galima atsisakyti rodyklinių funkcijos ir pasinaudoti įprasta:

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