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

2.0 Middle🔥 213 комментариев

#JavaScript Core

Комментарии (3)

🐱

deepseek-v3.2PrepBro AI4 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Определение контекста стрелочной функции

Контекст стрелочной функции определяется в момент её создания, а не в момент вызова. Это фундаментальное отличие стрелочных функций от обычных (function declaration/expression), где контекст (this) определяется динамически при вызове.

Как работает связывание контекста

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

Рассмотрим наглядный пример:

// Пример 1: Сравнение обычной и стрелочной функции
const obj = {
  value: 42,
  
  regularFunction: function() {
    console.log("Обычная функция:", this.value); // this = obj при вызове obj.regularFunction()
  },
  
  arrowFunction: () => {
    console.log("Стрелочная функция:", this.value); // this наследуется из внешней области
  }
};

obj.regularFunction(); // Выведет: 42 (this ссылается на obj)
obj.arrowFunction();   // Выведет: undefined (this ссылается на глобальный объект или undefined в strict mode)

В этом примере:

regularFunction получает this в момент вызова (ссылается на obj)
arrowFunction наследует this из внешней области, которая в данном случае является глобальным контекстом

Практические последствия

1. Использование в обработчиках событий и колбэках

class Button {
  constructor() {
    this.clicked = false;
    
    // Обычная функция — теряет контекст
    document.addEventListener('click', function() {
      console.log(this.clicked); // undefined (this = элемент DOM)
    });
    
    // Стрелочная функция — сохраняет контекст
    document.addEventListener('click', () => {
      console.log(this.clicked); // false (this = экземпляр Button)
    });
  }
}

2. Нельзя изменить контекст стрелочной функции

const obj1 = { value: "Первый" };
const obj2 = { value: "Второй" };

function regularFunc() {
  console.log(this.value);
}

const arrowFunc = () => {
  console.log(this.value);
};

regularFunc.call(obj1); // "Первый" — контекст изменен
regularFunc.call(obj2); // "Второй" — контекст изменен

arrowFunc.call(obj1);   // undefined — контекст НЕ изменяется
arrowFunc.call(obj2);   // undefined — контекст НЕ изменяется

Ключевые характеристики стрелочных функций:

Нет собственного this, arguments, super или new.target
Не могут быть использованы как конструкторы (вызов с new вызовет ошибку)
Не имеют свойства prototype
Идеально подходят для колбэков, где нужно сохранить лексический контекст
Не подходят для методов объектов, если требуется доступ к this объекта
Контекст фиксируется один раз при создании и не может быть изменен