Как предотвратить потерю контекста?

Потерю контекста (`this`) предотвращают стрелочными функциями, методом `bind`, полями класса со стрелками или сохранением `this` в переменную.

Проблема

Метод, переданный как колбэк, теряет this:

const user = {
  name: 'Ann',
  greet() { return this.name; },
};
setTimeout(user.greet, 100); // this потерян (в браузере — window, в Node — объект Timeout)

Способы предотвращения

1. Стрелочная функция (обёртка)

setTimeout(() => user.greet(), 100); // вызов через точку — this сохранён

2. bind

setTimeout(user.greet.bind(user), 100); // зафиксировать this

3. Поля класса со стрелками

class Button {
  handleClick = () => {           // стрелка берёт this лексически
    console.log(this);            // всегда экземпляр
  };
}

Не нужно биндить в конструкторе.

4. bind в конструкторе (классика)

constructor() {
  this.handleClick = this.handleClick.bind(this);
}

5. Сохранить this в переменную (устаревший приём)

const self = this;
setTimeout(function () { self.doSomething(); }, 100);

Как выбирать

• Колбэки в классах → поля-стрелки (современно).
• Одноразовая привязка → bind или стрелка-обёртка.
• Обычные объекты → стрелка-обёртка.

Коротко для собеседования

Потерю this предотвращают: стрелочной обёрткой (() => obj.method()), bind (method.bind(obj)), полями класса со стрелками (лексический this) или bind в конструкторе. Современный способ в классах — стрелочные поля; для разовых колбэков — стрелка-обёртка или bind.