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