Вопрос с собеседования · Frontend

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

JuniorОсновы JavaScript
Ещё спрашивают так:
  • Чем call, apply и bind отличаются друг от друга?
  • Почему this потерялся в колбэке?
Коротко

В обычной функции this определяется в момент вызова: obj.method() — obj; простой вызов f() — undefined в строгом режиме; new F() — новый объект; call/apply/bind — заданный явно. Стрелочная функция своего this не имеет — берёт его из окружения, где создана.

  • call(ctx, a, b) и apply(ctx, [a, b]) вызывают сразу, bind возвращает новую функцию
  • Метод, переданный колбэком (setTimeout(obj.m)), теряет this
  • Стрелки нельзя вызвать через new, у них нет arguments

А ещё В классах обработчики часто объявляют стрелками в полях класса

Подробно

Правила по приоритету:

  1. new F() — this = новый объект;
  2. явная привязка — call, apply, bind;
  3. вызов как метода obj.f() — this = obj;
  4. простой вызов f() — undefined в строгом режиме (в модулях и классах он всегда строгий), иначе глобальный объект.

Потеря контекста: button.addEventListener("click", this.onClick) передаёт функцию без объекта. Решения: this.onClick.bind(this), стрелочная обёртка, метод-стрелка в поле класса.

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

Пример

const user = {
  name: "Аня",
  hi() { return this.name; },
  hiLater() { setTimeout(() => console.log(this.name)); },  // стрелка — this от hiLater
};
user.hi();             // "Аня"
const f = user.hi;
f();                   // undefined или ошибка — this потерян
const g = user.hi.bind(user);
g();                   // "Аня"

Что хотят услышать

  • Правила определения this.
  • Отличие стрелочных функций.
  • call, apply, bind и потеря контекста.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗this в обычной функции определяется местом объявления, как у стрелочной
  • ✓В обычной функции this задаётся при вызове; стрелочная берёт this из окружения
  • ✗bind вызывает функцию немедленно
  • ✗Стрелочной функции можно поменять this через call

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования