Грешка со this во стрелковскиот обработувач на JavaScript

Во последно време стана модерно секаде да се користат стрелковски функции наместо обичните. Овие функции, сепак, имаат замка - тие не го зачувуваат this. Ајде да погледнеме со каквопроблем може да се сретнеме поради ова.

Нека имаме копче:

<button>text</button>

Да ја добиеме референцата кон ова копче во променлива:

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

Ќе додадеме обработувач на настан на копчето, користејќи стрелкова функција:

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

Тука нè чека изненадување: this во стрелковата функција нема да се однесува на елементот во кој се случил настанот.

Ајде да погледнеме што може да се направи за ова.

Прво решение

Може да се откажете од употребата на this и да се користи променливата на која е врзан настанот:

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

Второ решение

Елементот на кој е врзан настанот може да се добие преку event.target:

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

Трето решение

Може да се откажете од стрелковата функција и да се користи обична функција:

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