Что будет при вызове this в стрелочной функции?

Краткий ответ

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

Подробное объяснение

1. Ключевое отличие от обычных функций

У обычной функции значение this определяется в момент вызова и зависит от:

• Контекста объекта (если вызвана как метод)
• Глобального объекта (если вызвана просто как функция)
• Явного указания через call(), apply() или bind()
• Конструктора (если вызвана с new)

У стрелочной функции нет собственного this — она лексически связывает this с областью, где была определена.

2. Примеры с кодом

Пример 1: Глобальный контекст

const globalArrow = () => {
  console.log(this); // В браузере: window (в строгом режиме undefined)
};

globalArrow(); // this берётся из внешней области видимости

Пример 2: Контекст метода объекта

const person = {
  name: 'Alex',
  regularFunc: function() {
    console.log(this.name); // 'Alex' — this ссылается на person
  },
  arrowFunc: () => {
    console.log(this.name); // undefined — this из внешней области (глобальной)
  }
};

person.regularFunc(); // 'Alex'
person.arrowFunc();   // undefined (если не в строгом режиме, то пустая строка)

Пример 3: Стрелочная функция внутри обычной функции

function outer() {
  this.value = 10;
  
  const innerArrow = () => {
    console.log(this.value); // 10 — this унаследован от outer
  };
  
  innerArrow();
}

new outer(); // При вызове через new, this в outer — новый объект

Пример 4: Использование с обработчиками событий

class Button {
  constructor() {
    this.text = 'Click me';
    this.element = document.createElement('button');
    
    // Обычная функция теряет контекст
    this.element.addEventListener('click', function() {
      console.log(this.text); // undefined — this указывает на element
    });
    
    // Стрелочная функция сохраняет контекст
    this.element.addEventListener('click', () => {
      console.log(this.text); // 'Click me' — this унаследован от конструктора
    });
  }
}

3. Практические следствия и ограничения

Преимущества стрелочных функций:

• Не нужно использовать .bind(this) в классах или конструкторах
• Удобны для колбэков, где нужно сохранить внешний контекст
• Более предсказуемое поведение this

Ограничения:

• Не могут быть использованы как конструкторы (вызов с new вызовет ошибку)
• Нет собственных arguments, super или new.target
• Не подходят для методов объектов, где нужен доступ к самому объекту через this
• Не могут менять this через .call(), .apply(), .bind()

// Пример с call() — не работает
const arrow = () => console.log(this.name);
const obj = { name: 'Test' };

arrow.call(obj); // Не изменит this, выведет undefined (или значение из внешнего контекста)

4. Советы по применению

1. Используйте стрелочные функции:

   • Для колбэков, особенно в промисах и асинхронном коде
   • В методах классов React/Vue для сохранения контекста компонента
   • Вместо const self = this или .bind(this)

2. Используйте обычные функции:

   • Для методов объектов и классов
   • Когда нужен доступ к arguments
   • При работе с конструкторами
   • Когда нужно динамически изменять this

5. Итог

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

Такое поведение соответствует лексической области видимости (lexical scoping), которая применяется и к переменным в JavaScript. Это одно из ключевых отличий ES6, делающее код более чистым и менее подверженным распространённым ошибкам с контекстом выполнения.