Що означає ключове слово this?

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

Що це і навіщо

• this — ключове слово, що посилається на об’єкт, у контексті якого виконується код. Воно дозволяє доступ до властивостей і методів цього об’єкта.

Ключові принципи

• У звичайних функціях this визначається під час виклику: глобальний об’єкт у браузері, window/global, або об’єкт, що викликав функцію.
• У класах this завжди посилається на екземпляр класу, що створює об’єкт.
• У стрілкових функціях (=>) this не створюється, а береться з лексичного оточення.

Як це працює

• При виклику obj.method() JavaScript встановлює this = obj перед виконанням тіла функції.
• Якщо функція викликається без об’єкта (func()), this в режимі нестрогого режиму стає глобальним об’єктом, а у строгому — undefined.

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

class Person {
  constructor(name) { this.name = name; }
  greet() { console.log(`Hi, ${this.name}`); }
}
const p = new Person('Anna');
p.greet(); // Hi, Anna

const obj = { value: 42, get() { return this.value; } };
console.log(obj.get()); // 42

const arrow = () => console.log(this);
arrow(); // this from surrounding scope

Тестування

• У Jest можна перевірити контекст, використовуючи мок-функції:

const mock = jest.fn();
obj.method = mock;
obj.method();
expect(mock).toHaveBeenCalledWith(expect.objectContaining({ name: 'Anna' }));

Особливості в контексті JS/TS Core

• У TypeScript можна явно типізувати this у функціях: function foo(this: HTMLElement) { … }.
• У React‑компонентах класових компонентів this прив’язується до екземпляру компонента, що дозволяє використовувати this.state і this.setState.

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

• Не використовуйте this у функціях, що передаються як колбеки без прив’язки (bind, arrow function) — це призведе до undefined.
• У строгому режимі ('use strict';) виклик функції без об’єкта повертає undefined, що допомагає уникнути небажаних глобальних змінних.

Диагностика

• Якщо this не відповідає очікуваному об’єкту, перевірте спосіб виклику функції (метод, колбек, arrow function) і використайте bind або стрілкову функцію.

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

1. Виклик методу як колбек без прив’язки → this стає undefined.
2. Використання this у функції, що оголошена як arrow → береться з зовнішнього контексту.
3. Зміна this у строгому режимі → помилка.
4. Неочікуваний глобальний this у браузері → небезпечне використання.
5. Перевантаження this у класах без правильного конструктору.
6. Втрата контексту при передачі методу у setTimeout → використайте bind.
7. Неправильне типізування this у TS → помилки компіляції.
8. Зміна this через call/apply без необхідності → заплутаність коду.