Что будет при вызове this внутри функции в devtools

Что проверяют

Знаете ли вы, что значение this определяется способом вызова и режимом кода, а не местом объявления функции. Упоминание консоли не случайно: интервьюер хочет понять, различаете ли вы окружение консоли и модуль вашего приложения.

Как отвечать

Начать с правила: this вычисляется в момент вызова. Дальше разобрать случаи.

function f() { return this; }
f();            // нестрогий режим: window, строгий: undefined
obj.f();        // объект obj
f.call(ctx);    // ctx
new F();        // новый созданный объект

В консоли браузера код по умолчанию исполняется в нестрогом режиме в глобальной области, поэтому и this на верхнем уровне, и this внутри обычной функции, вызванной без объекта, дадут глобальный объект. Тот же код внутри модуля приложения даст undefined, потому что модули всегда строгие. Это и есть ловушка вопроса.

Стоит добавить:

• стрелочная функция своего this не имеет, берёт его из окружения, где создана, и call на неё не действует;
• тело класса всегда строгое, поэтому оторванный от объекта метод получает undefined;
• обычная функция в обработчике события получает элемент, на котором обработчик висит;
• если консоль открыта на паузе в отладчике, выражение считается в выбранном кадре стека, и this будет из него.

Где спотыкаются

Отвечают, что в функции this это всегда window, и не оговаривают режим. В современном фронтенде код почти всегда модуль или сборка со строгим режимом, так что верным ответом чаще оказывается undefined.

Второе: считают, что стрелочная функция, записанная как метод объекта, получит сам объект. Она возьмёт this из области, где написана, то есть в объектном литерале на верхнем уровне это глобальный объект или undefined, но не объект.

Третье: переносят вывод на серверный JavaScript. В модуле CommonJS this на верхнем уровне равен module.exports, то есть пустому объекту, а не глобальному, и один и тот же фрагмент в консоли браузера и в файле ведёт себя по-разному.