Последнее время стало модно применять
везде стрелочные функции вместо обычных.
Эти функции, однако, имеют подвох -
они не сохраняют 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);
});
Решение второе
Можно отказаться от стрелочной функции и воспользоваться обычной:
button.addEventListener('click', function() {
console.log(this.textContent);
});