Как изменится значение this, если обычную функцию заменить на стрелочную?

В JavaScript значение this определяется способом вызова функции, а не местом её объявления. У обычной функции есть собственный контекст, который устанавливается при вызове: через метод объекта, через call/apply/bind, через new или просто как свободный вызов (тогда в strict mode это undefined, иначе глобальный объект).

Как работает стрелочная функция

Стрелочная функция не создаёт собственный this. Она захватывает его из окружающей области видимости в момент создания. Это называется лексической привязкой. Внутри стрелочной функции this всегда тот же, что и снаружи, и его нельзя переопределить через call, apply или bind.

Пример: метод объекта

const user = {
  name: 'Alice',
  greetNormal() { return this.name; },
  greetArrow: () => this.name
};

console.log(user.greetNormal()); // 'Alice'
console.log(user.greetArrow());  // undefined (this — внешний, не user)

Обычный метод получает this = user, а стрелочная функция берёт this из модуля или глобальной области, где name отсутствует.

Пример: обработчик события

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

button.addEventListener('click', function() {
  console.log(this); // сам button
});

button.addEventListener('click', () => {
  console.log(this); // window или undefined, не button
});

Если нужен доступ к элементу через this, стрелочная функция не подойдёт — придётся использовать event.currentTarget.

Где стрелочные функции выигрывают

• Колбэки внутри методов, где нужно сохранить this внешней функции (например, в map, setTimeout, промисах).
• Функции без собственного состояния, где this вообще не нужен.
• Замена const self = this или .bind(this) — код становится короче.

class Timer {
  constructor() { this.seconds = 0; }
  start() {
    setInterval(() => { this.seconds++; }, 1000); // this — экземпляр Timer
  }
}

Итог: стрелочные функции удобны там, где нужно унаследовать this из внешнего контекста, но они непригодны для методов объектов, конструкторов и обработчиков, где ожидается динамический this. Заменяя обычную функцию на стрелочную, всегда проверяйте, откуда должен прийти контекст.