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

Последнее время стало модно применять везде стрелочные функции вместо обычных. Эти функции, однако, имеют подвох - они не сохраняют this. Давайте посмотрим, с какой проблемой можно столкнутся из-за этого.

Пусть у нас есть кнопка:

html<button>text</button>

Получим ссылку на эту кнопку в переменную:

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

Навесим на кнопку обработчик события, воспользовавшись стрелочной функцией:

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

Тут-то нас и поджидает сюрприз: this в стрелочной функции не будет относится к элементу, в котором произошло событие.

Давайте посмотрим, что с этим можно сделать.

Решение первое

Можно отказаться от использования this и воспользоваться переменной, к которой привязано событие:

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

Решение второе

Можно получить элемент, к которому привязано событие, через event.target:

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

Решение третье

Можно отказаться от стрелочной функции и воспользоваться обычной:

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