Как вызвать функцию, чтобы this указывал на нужный объект, а не на window в JavaScript

Что проверяют

Понимаете ли вы, что this определяется способом вызова, а не местом объявления функции. Следом почти всегда дают код: метод передали в setTimeout или в обработчик события, что выведется и как это починить.

Как отвечать

Сначала правило: у обычной функции this задаётся в момент вызова, по приоритету:

• вызов через new: this это только что созданный объект;
• явная привязка: fn.call(obj, a, b) и fn.apply(obj, [a, b]) вызывают функцию сразу, разница только в передаче аргументов. fn.bind(obj) ничего не вызывает, а возвращает новую функцию с навсегда привязанным контекстом;
• вызов как метода: в obj.method() значение this это obj, объект слева от точки;
• простой вызов fn(): в нестрогом режиме это глобальный объект (window в браузере), в строгом undefined. Модули ES и тела классов всегда строгие, поэтому в современном коде вы чаще увидите TypeError, чем window.

Стрелочные функции стоят особняком: своего this у них нет, они берут его из окружающей области при создании, и call, apply, bind его не меняют.

Практические способы не потерять контекст:

• обёртка-стрелка: setTimeout(() => this.save(), 100);
• привязка в классе: bind в конструкторе или поле класса со стрелкой handleClick = () => {...};
• обработчики DOM: в addEventListener обычная функция получает this, равный event.currentTarget, а стрелка нет.

Где спотыкаются

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

Думают, что bind можно вызвать повторно и перепривязать контекст. Второй bind на уже привязанной функции контекст не меняет, только добавляет аргументы.

Не видят потерю контекста при деструктуризации: const { save } = obj; save() это уже простой вызов, и this внутри не obj.