Gabimi i this në përpunuesin e shigjetave JavaScript

Kohët e fundit është bërë e modës përdorimi i funksioneve të shigjetës kudo në vend të atyre të zakonshëm. Këto funksione, megjithatë, kanë një kurth - ato nuk e ruajnë this. Le të shohim me çfarë problemi mund të hasim për shkak të kësaj.

Le të themi se kemi një buton:

<button>text</button>

Le të marrim një referencë për këtë buton në një ndryshore:

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

Le t'i lidhim butonit një përpunues ngjarjeje, duke përdorur një funksion shigjete:

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

Këtu na pret surpriza: this në funksionin shigjetë nuk do t'i referohet elementit në të cilin ndodhi ngjarja.

Le të shohim se çfarë mund të bëjmë për këtë.

Zgjidhja e parë

Mund të heqim dorë nga përdorimi i this dhe të përdorim ndryshoren në të cilën është lidhur ngjarja:

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

Zgjidhja e dytë

Mund të merret elementi në të cilin është lidhur ngjarja përmes event.target:

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

Zgjidhja e tretë

Mund të heqim dorë nga funksioni shigjetë dhe të përdorim një funksion të zakonshëm:

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