Почему внутри стрелочных функций это ведет себя по-другому? ⇐ Javascript

[Anonymous]

Когда я использую функцию стрелки в качестве обработчика событий, это не относится к элементу. Почему это происходит и когда вместо этого следует использовать обычную функцию?
Я пытаюсь понять, как ключевое слово this ведет себя по-разному внутри стрелочной функции по сравнению с обычной функцией при использовании в качестве обработчика событий. Почему внутри стрелочных функций это ведет себя иначе, чем в обычных функциях, и как именно JavaScript решает, к чему это относится в обоих случаях? Я поделюсь примером:

Код: Выделить всё

Click me


const button = document.getElementById('btn');

// Using a regular function
button.addEventListener('click', function() {
console.log('Regular function this:', this);
this.style.backgroundColor = 'lightgreen';
});

// Using an arrow function
button.addEventListener('click', () => {
console.log('Arrow function this:', this);
// Trying to change the button color here throws an error
// because 'this' is undefined or refers to the outer scope
this.style.backgroundColor = 'lightcoral';
});

Когда я нажимаю кнопку, первый прослушиватель событий (обычная функция) регистрирует элемент и успешно меняет цвет его фона.
Но второй прослушиватель событий (функция стрелки) этого не делает. Это либо неопределенное значение, либо относится к глобальной/внешней лексической области, а не к элементу кнопки. В каких ситуациях мне следует избегать использования стрелочных функций для обработчиков событий и когда они все еще безопасны или полезны?

Подробнее здесь: https://stackoverflow.com/questions/798 ... -functions