Чому дорівнює this в обробнику подій (event handler)?

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

Що це і навіщо

• this в JavaScript — ключове слово, що посилається на об’єкт, у контексті якого виконується функція. У випадку event handler‑ів це об’єкт, що генерує подію.

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

• DOM‑події: this → елемент, що викликав подію (наприклад, <button>).
• React клас: this → інстанс компонента, якщо обробник не прив’язаний через bind або arrow function.
• React функціональний компонент: this не використовується; замість цього застосовують хуки.
• Arrow function: this захоплює контекст зовнішньої функції.
• bind: this явно встановлюється при створенні обробника.

Як це працює

1. При додаванні слухача (element.addEventListener('click', handler)) браузер зберігає посилання на handler і контекст елемента.
2. При спрацьовуванні події браузер викликає handler.call(element, event).
3. У класах React, якщо обробник не прив’язаний, this буде undefined у strict mode; тому потрібне bind або arrow function.

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

// DOM‑подія
button.addEventListener('click', function(e) {
  console.log(this); // <button>
});

// React клас
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log(this); // MyComponent instance
  }
}

Тестування

У Jest можна перевірити контекст:

const handler = jest.fn();
button.addEventListener('click', handler);
button.click();
expect(handler.mock.calls[0][0].target).toBe(button);

Безпека і приватність

Неправильне використання this у класах може призвести до помилок, що впливають на логіку UI. Завжди прив’язуйте обробники або використовуйте arrow functions.

Оптимізація

У React функціональних компонентах уникати this зменшує кількість об’єктів і підвищує читабельність коду.