PassFront
  1. PassFront
  2. База знаний
  3. Объекты и прототипы

Какие проблемы могут возникнуть с неверным использованием контекста?

Объекты и прототипы

Проблемы с неверным использованием контекста (`this`): потеря контекста в колбэках, неверный `this` (undefined/window), ошибки при передаче методов, неожиданное поведение стрелок.

Основные проблемы

Потеря контекста в колбэках

Метод, переданный как колбэк, теряет this:

const obj = {
  name: 'Ann',
  greet() { return this.name; },
};
setTimeout(obj.greet, 100);  // this потерян (в браузере — window, в Node — объект Timeout)
button.addEventListener('click', obj.greet); // this = button, не obj

this = undefined / window

В обычной функции (не методе) this — undefined (strict) или window:

function fn() { return this.name; }
fn(); // TypeError: Cannot read property of undefined

Неверный this в методах классов

Обработчики теряют this без bind/стрелки:

class Btn {
  handleClick() { console.log(this); } // this потерян как колбэк
}

Стрелки как методы объекта

Стрелка берёт внешний this, а не объект:

const obj = {
  name: 'Ann',
  greet: () => this.name, // this НЕ obj
};

this в вложенных функциях

Обычная вложенная функция теряет this внешнего метода (решается стрелкой).

Как решать

  • bind — зафиксировать this.
  • Стрелки — для колбэков (лексический this).
  • Поля класса со стрелками — для обработчиков.
  • Понимать правила определения this.

Коротко для собеседования

Проблемы неверного this: потеря контекста в колбэках (setTimeout(obj.method), обработчики), this = undefined/window в обычных функциях, потеря в методах классов, стрелка как метод объекта (берёт внешний this, не объект), потеря в вложенных функциях. Решают: bind, стрелки для колбэков, поля класса со стрелками, понимание правил определения this.

Другие вопросы раздела