Теория: Позднее связывание

В этом уроке разбираем позднее связывание. Это центральная идея объектной модели, и в JavaScript она напрямую связана с this.

Коротко: this определяется не там, где функция объявлена, а там, где она вызвана.

Базовый пример

const makeNode = (name) => ({
  name,
  getName() {
    return this.name;
  },
});

const obj = makeNode('table');
obj.getName(); // table

Метод вызван как obj.getName(), поэтому this внутри метода указывает на obj.

Почему тот же код может упасть

const func = obj.getName;
func();
// TypeError: Cannot read property 'name' of undefined

Здесь вызов идет без объекта слева от точки. Контекст потерян, this больше не связан с obj.

Это одна из самых частых ошибок в JS-коде.

Позднее связывание на практике

Одна и та же функция может работать с разными объектами, если вызывать ее в разном контексте:

function f(name) {
  this.name = name;
}

const obj1 = { setName: f };
const obj2 = { setName: f };

obj1.setName('martin');
obj2.setName('mike');

Функция одна, но результат разный, потому что this подставляется в момент вызова.

Стрелочные функции и this

У стрелочных функций нет собственного this. Они берут его из внешнего окружения.

Поэтому такой код часто ведет себя не так, как ожидают:

const makeNode = (name) => ({
  name,
  getName: () => this.name,
});

Здесь this не становится "объектом метода", и вызов обычно приводит к ошибке или неожиданному значению.

Связь с наследованием

Когда в псевдоклассическом стиле делают Parent.apply(this, args), мы тоже опираемся на механизм позднего связывания: вручную задаем контекст, в котором выполнится функция-конструктор родителя.

Итоги

В JavaScript полезно мысленно читать this как "контекст вызова".

Это простое переименование сильно снижает количество ошибок и делает предсказуемыми случаи, где методы передают как колбэки или сохраняют в переменные.