> Как решать проблему потери контекста методов в классах JavaScript/TypeScript (JavaScript, TypeScript)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: ЛОЦИЯ

Стек: JavaScript, TypeScript

> Пример ответа

Проблема потери контекста this возникает, когда метод класса вызывается вне его контекста (например, как callback). Основные решения:

Стрелочные функции в определении класса (TypeScript/ES6):

TYPESCRIPT
class MyClass {
  private value = 42;
  handleClick = () => {
    console.log(this.value); // this всегда привязан к экземпляру
  }
}

Минус: создаётся отдельная функция для каждого экземпляра, что увеличивает потребление памяти.

Явная привязка через .bind():

TYPESCRIPT
class MyClass {
  private value = 42;
  handleClick() {
    console.log(this.value);
  }
}
const instance = new MyClass();
button.addEventListener('click', instance.handleClick.bind(instance));

Или в конструкторе: this.handleClick = this.handleClick.bind(this);

Стрелочная функция при передаче (часто в React):

TSX
<button onClick={() => this.handleClick()} />

Минус: создаёт новую функцию при каждом рендере, что может влиять на производительность.

Декораторы (TypeScript/Experimental):

TYPESCRIPT
class MyClass {
  @boundMethod
  handleClick() { ... }
}

Требует настройки experimentalDecorators.

Использование замыканий (функциональный подход):

TYPESCRIPT
function useHandler(value: number) {
  return () => console.log(value);
}

Рекомендация: Для React-компонентов используйте стрелочные методы класса или хуки с useCallback. Для обычных классов - привязку в конструкторе или стрелочные методы, если количество экземпляров невелико.