Разбираемся с потерей контекста this в JavaScript! 🔍

Мы часто сталкиваемся с вопросами о this на собеседованиях по JavaScript. Сегодня мы разберем типичный случай, когда контекст this теряется и как это повлияет на код.

📝 Рассмотрим пример:

function show() {
  console.log(this);
}

const obj = {show: show};
obj.show();

В этом случае this внутри функции show будет указывать на объект obj, так как функция вызывается как метод этого объекта.

Так, базово можно сказать, что this – это объект «перед точкой». Если при вызове функции что-то есть перед точкой, то это “что-то” будет доступно как this внутри этой функции.

🔄 Но что происходит, если вызовем функцию не как метод объекта?

const showAgain = obj.show;
showAgain(); // this потерян, в консоль выведется undefined или глобальный объект

Здесь this теряется, потому что мы вызываем функцию show не через объект, а напрямую. “Чего-то перед точкой” больше нет, и наш this будет потерян.

⏲ Сложный случай с setTimeout:

setTimeout(obj.show, 1000);

Хотя кажется, что show все еще метод объекта obj, контекст теряется. Это происходит потому, что setTimeout вызывает функцию show как обычную функцию, а не как метод объекта.

Мы можем немного развернуть данную запись, если попробуем описать функцию setTimout:

function setTimout(handler, timeout) {
 // что-то происходит
 // ...
 // и наконец где-то вызывается handler
 handler();
 // ...
}

Таким образом наш переданный метод obj.show будет вызываться где-то внутри setTimout как handler, без “чего-то” перед точкой, а значит потеряет свой контекст.

📖 Чтение по теме:
Почему это происходит:
- Понимаем ссылочные типы
Обсуждения и подробности this:
- Методы объекта и контекст 'this'
- Habr: Детально о this
- TheCode: Как работает this в JavaScript