PassFront
  1. PassFront
  2. База знаний
  3. Функции

В чем особенность взаимодействия this и стрелочной функции?

Функции

Особенность в том, что стрелочная функция не имеет своего `this` — она берёт его лексически из внешнего окружения в момент создания. Поэтому её this нельзя переопределить.

Как это работает

Обычная функция получает this при вызове (динамически). Стрелка — нет: она «наследует» this того контекста, где была объявлена.

const obj = {
  name: 'Ann',
  regular() {
    return function () { return this; };   // this зависит от вызова
  },
  arrow() {
    return () => this;                     // this = obj (лексически)
  },
};

obj.regular()(); // undefined (strict)
obj.arrow()();   // obj

Практическая польза

Стрелки решают проблему «потери this» в колбэках внутри методов/классов:

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

С обычной функцией this внутри setInterval был бы потерян.

Следствия

  • call/apply/bind не меняют this стрелки.
  • Стрелку нельзя использовать как метод объекта, если нужен this объекта.
  • У стрелки нет arguments.

Коротко для собеседования

Стрелочная функция берёт this лексически из окружения создания и не имеет своего; call/apply/bind его не меняют. Это удобно для колбэков внутри методов/классов (не теряется this), но делает стрелки непригодными как методы объектов.

Другие вопросы раздела