Greška sa this u JavaScript streličastom handleru

U poslednje vreme je postalo moderno koristiti streličaste funkcije svuda umesto običnih. Ove funkcije, međutim, imaju zamku - one ne čuvaju this. Hajde da pogledamo sa kakvim problemom možemo da se suočimo zbog toga.

Neka postoji dugme:

<button>text</button>

Dobijamo referencu na ovo dugme u promenljivu:

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

Dodajemo handler događaja na dugme, koristeći streličastu funkciju:

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

Tu nas čeka iznenađenje: this u streličastoj funkciji neće se odnositi na element u kome se događaj desio.

Hajde da vidimo šta se može uraditi po tom pitanju.

Prvo rešenje

Možemo odustati od korišćenja this i koristiti promenljivu na koju je događaj vezan:

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

Drugo rešenje

Možemo dobiti element na koji je događaj vezan preko event.target:

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

Treće rešenje

Možemo odustati od streličaste funkcije i koristiti običnu:

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