Що таке втрата контексту, коли відбувається і як їй запобігти?

Повне пояснення

Що це і навіщо

Втрата контексту – явище, коли в момент виконання функції значення this не збігається з об’єктом, у якому вона була оголошена. Це часто призводить до помилок типу Cannot read property 'x' of undefined.

Ключові принципи/терміни

• this – контекст виконання
• callback – функція, передана як аргумент
• bind, call, apply – методи прив’язки контексту
• arrow function – лямбда, що захоплює this з зовнішнього блоку

Як це працює Коли функція передається без прив’язки, JavaScript встановлює this як глобальний об’єкт (в браузері – window) або undefined у strict mode. Якщо функція очікує доступ до полів об’єкта, результат – помилка.

Практика і реалізація

const obj = {
  x: 42,
  show(){ console.log(this.x); }
};

// Втрата контексту
setTimeout(obj.show, 0); // → TypeError: Cannot read property 'x' of undefined

// Запобігання через bind
setTimeout(obj.show.bind(obj), 0); // → 42

// Запобігання через arrow‑функцію
setTimeout(() => obj.show(), 0); // → 42

Тестування У Jest можна перевірити, що this прив’язано:

test('bind preserves this', () => {
  const obj = { val: 1, fn() { return this.val; } };
  const bound = obj.fn.bind(obj);
  expect(bound()).toBe(1);
});

Оптимізація, типові помилки та edge cases

• Не забувайте про use strict – у ньому this буде undefined, що допомагає виявити помилки.
• У React‑компонентах класів використовуйте this.handleClick = this.handleClick.bind(this) у конструкторі або arrow‑функції.
• У функціональних компонентах useCallback з правильним списком залежностей запобігає зайвим ре‑прив’язкам.

Часті помилки

1. Передача методу без bind у setInterval.
2. Використання this в arrow‑функції, коли треба контекст класу.
3. Забудьте про useCallback у React – створюється нова функція щоразу.

Cheatsheet

• bind(obj) – створює нову функцію з прив’язаним this.
• Arrow‑функція – захоплює this з зовнішнього блоку.
• У strict mode this у звичайній функції – undefined.

Follow‑up питання

• Як працює call і apply?
• Чому arrow‑функції не мають власного this?