Какие знаешь проблемы у this в JavaScript

«Какие знаешь проблемы у this в JavaScript» — вопрос из категории JavaScript, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

В JavaScript this может вызывать проблемы из-за динамического контекста:

  1. Потеря контекста в колбэках:
const obj = {
  name: 'Test',
  logName() {
    console.log(this.name);
  }
};

setTimeout(obj.logName, 100); // undefined
  1. Разный контекст в строгом ('use strict') и нестрогом режиме:
  • В нестрогом режиме this в функции без контекста = window
  • В строгом режиме = undefined
  1. Методы как пропсы в React могут терять контекст:
<button onClick={this.handleClick}>Click</button> // без bind потеряет this
  1. Стрелочные функции не имеют своего this, берут из внешнего контекста, что может быть неожиданным.

Решения:

  • Использовать bind()
  • Стрелочные функции
  • Сохранение контекста в переменную (const self = this)