Предыдущий this от чего берет стрелочная функция

Механизм this в стрелочных функциях

Стрелочные функции не имеют собственного контекста this. Вместо этого они «берут» (заимствуют) значение this из окружающей их лексической области видимости — то есть от того места, где они были определены, а не вызваны. Это одно из ключевых отличий от обычных функций, которые определяют свой this динамически, в момент вызова.

Откуда конкретно берется this?

Предыдущий (или вернее — родительский) this для стрелочной функции определяется цепочкой областей видимости:

1. Из внешней функции, в которой стрелочная функция определена.
2. Из контекста модуля (глобального объекта или undefined в strict mode), если стрелочная функция определена на верхнем уровне.

Практические примеры

Пример 1: Заимствование из метода объекта

const person = {
  name: 'Анна',
  regularGreet: function() {
    console.log('Обычная функция:', this.name); // this = объект person
  },
  arrowGreet: () => {
    console.log('Стрелочная функция:', this.name); // this берется извне!
  }
};

person.regularGreet(); // "Обычная функция: Анна"
person.arrowGreet();   // "Стрелочная функция: undefined" (в браузере - window.name)

Здесь arrowGreet определена на верхнем уровне в лексическом окружении объекта person (но не в его методе!). В браузере этот верхний уровень — глобальный объект window. Поэтому this внутри arrowGreet — это window, а не person.

Пример 2: Полезное заимствование в колбэках

Главная практическая польза — сохранение контекста внутри вложенных функций, например, в обработчиках событий или таймерах.

class Timer {
  constructor() {
    this.seconds = 0;
  }

  start() {
    // Обычная функция создает свой собственный this
    setInterval(function() {
      this.seconds++; // ОШИБКА! this = глобальный объект (или undefined)
      console.log(this.seconds);
    }, 1000);

    // Стрелочная функция заимствует this из метода start
    setInterval(() => {
      this.seconds++; // КОРРЕКТНО! this = экземпляр Timer
      console.log(this.seconds);
    }, 1000);
  }
}

const myTimer = new Timer();
myTimer.start();

Ключевые правила и отличия от обычных функций

• Лексическое связывание (Lexical Binding): this «замораживается» в момент определения функции и не меняется.
• Нельзя изменить контекст: Методы .call(), .apply() и .bind() не работают для стрелочных функций. Их this всегда остается тем, который был взят из лексического окружения.

  const obj = { value: 1 };
  const arrowFunc = () => console.log(this.value);
  arrowFunc.call(obj); // undefined, а не 1. Вызов call() игнорируется.
  

• Нет своего arguments: Аналогично this, стрелочные функции не имеют своего объекта arguments. Они используют arguments из внешней области видимости.
• Не могут быть конструкторами: Вызов стрелочной функции с оператором new вызовет ошибку, так как у нее нет своего this.

Итог

Стрелочная функция берет значение this из своей внешней, окружающей лексической области видимости (scope) — той функции или модуля, в теле которых она была физически написана в коде. Это делает ее идеальным инструментом для колбэков, где нужно сохранить контекст родителя (в методах классов, обработчиках событий, асинхронных операциях), но не подходит для использования в качестве методов объекта, которые должны иметь доступ к его свойствам через динамический this.