Грешка с 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);
});