Потеря контекста и как её чинить

Метод — обычная функция, которая просто лежит в свойстве объекта. Она не помнит, кому принадлежит: связь возникает в момент вызова, когда слева от скобок стоит точка. Присваивание const greet = user.hello копирует функцию, а точку — нет. Само правило «контекст задаёт вызов» разобрано в статье «Что такое this и откуда он берётся» — здесь смотрим, что с ним идёт не так.

const user = {
  login: "anya",
  hello() {
    console.log(`Привет, ${this?.login}`);
  }
};
user.hello();
const greet = user.hello;
greet();

Вопросительный знак в this?.login здесь не для красоты. В строгом режиме (а модули строгие всегда) this внутри оторванного метода равен undefined, и обычная точка уронила бы пример с TypeError. Мы подстраховались, чтобы увидеть потерю, а не аварию.

this отвечает не на вопрос «где написано», а на вопрос «как позвали».

setTimeout(timer.ring, 0) — то же самое присваивание, только в чужие руки: в очередь попадает голая функция. Через положенное время браузер вызовет её сам, и никакого объекта слева от вызова уже не будет.

const timer = {
  label: "чайник",
  ring() {
    console.log(`${this?.label} вскипел`);
  }
};
setTimeout(timer.ring, 0);
setTimeout(() => timer.ring(), 0);

Разница между двумя последними строками — пара скобок. В первой мы отдали таймеру саму функцию, во второй — стрелку, которая позовёт метод через точку, когда придёт время. То же самое случается с promise.then(obj.method) и arr.forEach(obj.method): всюду, где функцию передают по имени.

В настоящем браузере всё ломается ещё интереснее. Там функции подписывают на события: button.addEventListener("click", counter.inc) просит браузер вызывать counter.inc при каждом клике по кнопке. Вызывает её уже сам браузер, и обычная функция-обработчик получает в this элемент, на котором висит подписка, — саму кнопку. Контекст не исчезает — он подменяется, и это коварнее, потому что ошибки может не быть вовсе.

Сами события и подписку на них подробно разбирает статья «Что такое событие и как на него подписаться» в части II. А в песочнице document недоступен, поэтому соберём мини-кнопку руками — механика та же.

const button = {
  handlers: [],
  on(f) { this.handlers.push(f); },
  click() { this.handlers.forEach((f) => f.call(this)); }
};
const counter = { count: 0, inc() { this.count += 1; console.log(this.count); } };
button.on(counter.inc);
button.click();

Счётчик остался нулём, зато у кнопки завёлся посторонний count со значением NaN. Запомните эту связку: NaN почти всегда означает, что this.что-то было undefined, а мы прибавили к нему число.

Все три лечения делают одно и то же — возвращают вызову объект. Первое: стрелочная функция. У неё нет собственного this, она берёт его из той функции, внутри которой написана, — а там контекст ещё цел.

const cart = {
  items: 2,
  reportLater() {
    setTimeout(() => console.log(this.items), 0);
  }
};
cart.reportLater();

Второе: bind. Он не вызывает функцию, а возвращает новую — с намертво приклеенным объектом. Её можно спокойно передавать куда угодно, контекст поедет вместе с ней. Сам bind и его родня разобраны в статье «call, apply и bind».

const order = { items: 2, report() { console.log(this.items); } };
const bound = order.report.bind(order);
console.log(bound === order.report);
bound();

Третье: функция-обёртка. Самое честное и самое читаемое — мы просто откладываем нормальный вызов «через точку» до нужного момента. Обёртка удобна, когда методу надо передать аргументы или что-то посчитать перед вызовом.

const clicker = { count: 0, tick() { this.count += 1; console.log(this.count); } };
const onClick = () => clicker.tick();
onClick();
onClick();

Потеря контекста редко объявляет о себе прямо. Чаще вы видите один из четырёх симптомов — и тогда стоит вернуться к строке, где функция была передана без скобок.

const box = {
  size: 10,
  show: () => console.log(this?.size)
};
box.show();

function who() { console.log(this.tag); }
const a = who.bind({ tag: "A" });
const b = a.bind({ tag: "B" });
b();