Что такое this и откуда он берётся

Во многих языках this — это «сам объект», и он известен сразу, по тексту класса. В JavaScript иначе: обычная функция не помнит, где её написали. this внутри неё — пустое место, которое заполняется в момент вызова. Со стороны объекта мы это уже видели в статье «Методы и this»; здесь смотрим со стороны функции.

function whoAmI() {
  console.log(this.name);
}
const cat = { name: "Мурзик", say: whoAmI };
const dog = { name: "Бобик", say: whoAmI };
cat.say();
dog.say();

Функция одна — а this два разных. Поэтому вопрос «чему равен this в этой функции» без вызова смысла не имеет. Правильный вопрос — «как её позвали».

Удобно думать о this как о скрытом первом параметре: его не пишут в скобках, но он приходит вместе с вызовом, как и обычные аргументы.

Самый частый случай — вызов метода: obj.method(). Правило простое: this — это то, что стоит слева от точки в выражении вызова. Не там, где объект объявлен, а именно здесь и сейчас.

const user = {
  name: "Аня",
  greet() {
    console.log("Привет, я " + this.name);
  }
};
user.greet();

Выручалочка: глазами найди точку перед скобками вызова. Что слева от неё — то и в this. Нет точки — нет и объекта.

Если точек в цепочке несколько, берётся ближайший слева объект — всё, что было до него, на this не влияет. Квадратные скобки работают так же: user["greet"]() даст тот же this, что и user.greet().

const outer = {
  title: "внешний",
  inner: {
    title: "внутренний",
    show() { console.log(this.title); }
  }
};
outer.inner.show();

А если слева от скобок ничего нет — просто fn()? Тогда объекта-владельца у вызова нет, и подставлять в this нечего. В строгом режиме язык честно оставляет там undefined.

function detect() {
  "use strict";
  console.log(this === box);
}
const box = { detect };
box.detect();
detect();

Сама по себе такая функция не падает — ошибка приходит на первом же обращении к свойству: у undefined нет ни name, ни чего-либо ещё. Знакомое сообщение «Cannot read properties of undefined» почти всегда означает именно потерянный this.

function greet() {
  "use strict";
  console.log("Привет, " + this.name);
}
try { greet(); } catch (e) { console.log(e.constructor.name); }

Строгий режим включается директивой "use strict" в начале файла или тела функции; код в ES-модулях и внутри class строгий всегда. Для this разница ровно одна, зато заметная: строгий режим оставляет undefined, а нестрогий молча подменяет его на глобальный объект.

function strict() {
  "use strict";
  console.log(this);
}
// тело new Function компилируется в глобальной области и ничего из примера
// не видит — поэтому оно возвращает ответ, а печатаем мы снаружи
const sloppy = new Function("return this === globalThis;");
strict();
console.log(sloppy());

Практический вывод: современный код почти весь строгий, и это хорошо. Потерянный this даёт быстрый TypeError в той же строке, где ошиблись, вместо тихой записи мусора в глобальный объект — такую находят через час отладки.

// тело new Function компилируется в глобальной области, поэтому ответ оно
// возвращает наружу — печатаем уже здесь
const show = new Function("return [typeof this, this.valueOf()];");
console.log(...show.call(5));

Глобальный объект — тот, где живут console, setTimeout и глобальные переменные скрипта. В браузере он зовётся window, в Node.js — global, а надёжное имя, работающее везде, — globalThis.

На верхнем уровне обычного скрипта this и есть этот объект; на верхнем уровне ES-модуля — undefined. Именно из-за подмены в нестрогом режиме функция, вызванная без объекта, способна незаметно дописывать свойства в глобальное пространство.

const bump = new Function("this.count = (this.count || 0) + 1;");
bump();
bump();
console.log(globalThis.count);

Функция думала, что работает со «своим» объектом, а на деле дважды дописала свойство в общий для всех globalThis. В строгом коде та же попытка обвалилась бы сразу — и это дешевле.

Самая частая ошибка новичка — «оторвать» метод от объекта: положить его в переменную или передать колбэком в setTimeout, forEach, обработчик события. Точка исчезла — исчез и this. Каждому такому случаю и всем трём лечениям посвящена следующая статья — «Потеря контекста и как её чинить».

const timer = {
  label: "таймер",
  show() { console.log(this === timer); }
};
timer.show();
const detached = timer.show;
detached();

Функцию никто не испортил — её просто позвали иначе. Собрать всё вместе помогает шпаргалка по видам вызова:

const timer = { label: "таймер", show() { console.log(this.label); } };
const bound = timer.show.bind(timer);
bound();