> Что такое контекст (this) в JavaScript (JavaScript)

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

this в JavaScript - это специальное ключевое слово, которое ссылается на объект, в контексте которого была вызвана функция. Значение this определяется не тем, где функция объявлена, а тем, как она вызвана. В глобальной области видимости this ссылается на глобальный объект (window в браузере, global в Node.js), а в строгом режиме в обычной функции - undefined.

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

this - это динамический контекст выполнения. Его значение зависит от способа вызова функции:

1. Обычный вызов функции - this ссылается на глобальный объект (или undefined в strict mode).
2. Вызов как метод объекта - this ссылается на объект, через который вызван метод.
3. Вызов через call, apply, bind - this задаётся явно первым аргументом.
4. Вызов через new - this ссылается на новый созданный объект.
5. Стрелочные функции - не имеют собственного this, они наследуют его из внешней лексической области видимости.

Важно понимать: this не привязывается к функции навсегда. Одна и та же функция может иметь разный this в зависимости от того, как её вызвали.

На практике

В реальной frontend-разработке this часто встречается в обработчиках событий, методах классов и при работе с DOM. Например, в обработчике события this ссылается на элемент, на котором висит обработчик. В классах this используется для доступа к полям и методам экземпляра.

При работе с React важно помнить, что методы класса не привязаны автоматически - нужно использовать стрелочные функции или явный bind, иначе this потеряется при передаче метода как callback.

Пример кода

JAVASCRIPT
// Обычный вызов
function showThis() {
  console.log(this); // window (или undefined в strict mode)
}
showThis();

// Метод объекта
const user = {
  name: 'Анна',
  greet() {
    console.log(this.name); // 'Анна'
  }
};
user.greet();

// call / apply
function introduce(city) {
  console.log(`${this.name} из ${city}`);
}
introduce.call(user, 'Москва'); // 'Анна из Москва'

// bind
const boundGreet = user.greet.bind(user);
boundGreet(); // 'Анна'

// Стрелочная функция
const arrow = () => {
  console.log(this); // лексический this (внешний контекст)
};

Как отвечать на собеседовании

Начни с простого определения: this - это контекст вызова функции. Затем перечисли основные правила определения значения this (вызов как метод, обычный вызов, new, call/apply/bind, стрелочные функции). Приведи короткий пример для каждого случая. Если спросят про стрелочные функции - обязательно упомяни, что они не имеют собственного this и берут его из внешней области видимости.

Хорошо показать понимание разницы между динамическим и лексическим контекстом. Можно добавить, что в классах this работает так же, как в методах объектов, но есть нюанс с потерей контекста при передаче метода как callback.

Что проверяет интервьюер

Интервьюер проверяет:

• понимание, что this - это динамическая привязка, а не ссылка на саму функцию;
• знание всех способов вызова функции и их влияния на this;
• понимание разницы между обычными и стрелочными функциями;
• умение объяснить, почему this теряется в обработчиках событий и как это исправить;
• знание call, apply, bind и их отличий.

Типичные ошибки

• Утверждение, что this всегда ссылается на объект, где объявлена функция - это неверно.
• Забывают про strict mode, где this в обычной функции - undefined.
• Путают call и apply (разница только в передаче аргументов: список vs массив).
• Не знают, что стрелочные функции нельзя использовать с call, apply, bind для изменения this.
• Думают, что this внутри вложенной функции ссылается на this внешней функции - это не так (если не использовать стрелочную функцию или сохранение this в переменную).