Что такое контекст в JavaScript

Вопрос

Что такое контекст в JavaScript

Профессия

Frontend Developer

Что хочет услышать интервьюер

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

Ключевые тезисы

• Контекст в JavaScript — это значение ключевого слова this, которое указывает на объект, в рамках которого выполняется текущий код.
• Контекст определяется тем, как вызывается функция: через вызов метода объекта, через конструктор, с использованием методов call, apply или bind, или как обычная функция.
• В глобальной области видимости this ссылается на глобальный объект (например, window в браузере).
• В строгом режиме ('use strict') this в глобальной области видимости или в функциях, вызванных без контекста, будет undefined.
• Контекст можно явно задать с помощью методов call, apply или bind.

Подробный ответ

Контекст в JavaScript — это значение ключевого слова this, которое указывает на объект, в рамках которого выполняется текущий код. Контекст определяется тем, как вызывается функция: через вызов метода объекта, через конструктор, с использованием методов call, apply или bind, или как обычная функция. В глобальной области видимости this ссылается на глобальный объект (например, window в браузере). В строгом режиме ('use strict') this в глобальной области видимости или в функциях, вызванных без контекста, будет undefined. Контекст можно явно задать с помощью методов call, apply или bind.

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

Пример 1

Пример изменения контекста с помощью bind: const obj = { name: 'John' }; function greet() { console.log(`Hello, ${this.name}`); }; const boundGreet = greet.bind(obj); boundGreet(); // Выведет: Hello, John

Пример 2

Пример использования call для вызова функции с другим контекстом: const obj = { name: 'Jane' }; function greet() { console.log(`Hello, ${this.name}`); }; greet.call(obj); // Выведет: Hello, Jane

Пример 3

Пример стрелочной функции, которая не имеет своего контекста: const obj = { name: 'Mike', greet: () => { console.log(`Hello, ${this.name}`); } }; obj.greet(); // Выведет: Hello, undefined (так как стрелочная функция берет контекст из окружающей области)

Частые ошибки

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

Связанные темы

• Замыкания в JavaScript
• Прототипы и наследование
• Асинхронный код и контекст

Follow-up вопросы

Как изменить контекст функции после её объявления?

Уровень: basic

Контекст функции можно изменить с помощью методов call, apply или bind. call и apply вызывают функцию с новым контекстом сразу, а bind создаёт новую функцию с привязанным контекстом.

Чем отличается поведение this в стрелочных функциях от обычных?

Уровень: intermediate

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

Как работает this внутри конструктора класса?

Уровень: intermediate

В конструкторе класса this ссылается на новый создаваемый экземпляр класса. Если конструктор вызывается без new, this будет undefined в строгом режиме или глобальный объект.

Что произойдёт, если передать null или undefined в call/apply/bind?

Уровень: advanced

При передаче null или undefined в call/apply/bind в нестрогом режиме this будет заменён на глобальный объект (например, window). В строгом режиме останется переданное значение.

Как контекст влияет на обработчики событий в DOM?

Уровень: intermediate

В обработчиках событий DOM, если функция назначена напрямую, this ссылается на элемент, который вызвал событие. При использовании стрелочных функций контекст берётся из окружающей области.