Что такое this в JavaScript

Вопрос

Что такое this в JavaScript

Профессия

Frontend Developer

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

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

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

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

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

В JavaScript ключевое слово this представляет собой контекст выполнения функции, который определяется в момент её вызова, а не объявления. Это означает, что значение this может меняться в зависимости от того, как и где функция вызывается. Основные сценарии поведения this включают: вызов как метода объекта (где this ссылается на сам объект), вызов через new (где this указывает на новый экземпляр объекта), использование call, apply или bind (где this явно задаётся), а также вызов в глобальном контексте (где this ссылается на window в нестрогом режиме или undefined в строгом). Стрелочные функции не имеют своего this и наследуют его из окружающего лексического контекста.

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

Пример 1

Пример 1: Вызов функции как метода объекта

const person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};
person.greet(); // Выведет: Hello, my name is Alice

Пример 2

Пример 2: Использование bind для явного задания this

function sayAge() {
  console.log(`I am ${this.age} years old`);
}
const user = { age: 25 };
const boundFunc = sayAge.bind(user);
boundFunc(); // Выведет: I am 25 years old

Пример 3

Пример 3: Разница между обычной и стрелочной функцией

const obj = {
  value: 42,
  regularFunc: function() {
    console.log(this.value); // 42
  },
  arrowFunc: () => {
    console.log(this.value); // undefined (наследует глобальный контекст)
  }
};
obj.regularFunc();
obj.arrowFunc();

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

• Путаница между контекстом вызова и объявления функции, особенно при использовании колбэков
• Ожидание, что this в стрелочной функции будет ссылаться на объект, в котором она определена
• Забывание о строгом режиме, где this в глобальной функции будет undefined вместо window

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

• Замыкания (closures) в JavaScript
• Прототипы и наследование
• Работа с контекстом через call, apply, bind
• Стрелочные функции и их особенности

Follow-up вопросы

Как поведение this отличается в строгом и нестрогом режиме?

Уровень: basic

В нестрогом режиме this в глобальном контексте ссылается на объект window, а в строгом режиме — на undefined. Это помогает избежать неявных ошибок.

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

Уровень: intermediate

Стрелочные функции не имеют собственного this. Они наследуют его из окружающего контекста, где они были объявлены.

Как можно явно задать значение this для функции?

Уровень: intermediate

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

Что произойдёт, если вызвать функцию с new?

Уровень: advanced

При вызове функции с new создаётся новый объект, и this внутри функции ссылается на этот объект. Это используется для создания экземпляров классов или конструкторов.

Как this работает в методах объекта?

Уровень: basic

В методах объекта this ссылается на сам объект, в контексте которого был вызван метод. Это позволяет обращаться к свойствам и методам объекта через this.