call, apply и bind

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

const counter = { value: 10, show() { console.log(this.value); } };
const show = counter.show; // связь с объектом потеряна

show.call(counter);
show.call({ value: 99 });

call вызывает функцию немедленно, а первым аргументом принимает то, чем станет this. Остальные аргументы едут следом, как при обычном вызове. Это и есть явная привязка: контекст задан в коде, а не выведен из формы вызова.

apply делает ровно то же, что call, и отличается единственным: аргументы функции передаются одним массивом. Никакой разницы в скорости, поведении this или возвращаемом значении между ними нет — выбирайте по тому, в каком виде у вас уже лежат аргументы.

function sum(a, b, c) {
  console.log(this.label, a + b + c);
}
const ctx = { label: "итого:" };

sum.call(ctx, 1, 2, 3);
sum.apply(ctx, [1, 2, 3]);

Мнемоника кривая, но помогает: call — Comma, аргументы через запятую; apply — Array, аргументы массивом.

const nums = [3, 7, 2];

console.log(Math.max.apply(null, nums));
console.log(Math.max(...nums));

bind ничего не вызывает. Он возвращает новую функцию — обёртку, внутри которой this уже зафиксирован. Исходная функция при этом не меняется, а копия работает независимо от объекта, из которого её достали.

const timer = { ticks: 5, report() { console.log(this.ticks); } };
const report = timer.report.bind(timer);

report();
timer.report = null; // исходное свойство стёрли
report();

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

function who() {
  console.log(this.n);
}
const first = who.bind({ n: 1 });
const second = first.bind({ n: 2 });

second();

После контекста bind принимает любое число аргументов — они «прирастают» к функции слева. Получается новая функция, которой нужно передать только оставшиеся параметры. Это и называют частичным применением.

function multiply(a, b) {
  return a * b;
}
const double = multiply.bind(null, 2);

console.log(double(21));
console.log(double(5));

Если this функции не нужен, первым аргументом обычно ставят null — как в примере выше. А когда нужен и контекст, и заготовленные аргументы, bind закрывает оба вопроса одним вызовом.

const greeter = { sign: "!" };
function say(greeting, name) {
  console.log(greeting + ", " + name + this.sign);
}
const hi = say.bind(greeter, "Привет");

hi("Аня");
hi("Боря");

Методы массива написаны так, что им достаточно числовых ключей и свойства length — знать, что перед ними настоящий массив, им не нужно. Значит, метод можно одолжить: взять его у Array.prototype и вызвать через call, подставив контекстом массивоподобный объект.

const list = { 0: "a", 1: "b", length: 2 };

console.log([].join.call(list, "-"));
console.log(Array.prototype.slice.call(list));

Классический случай — псевдомассив arguments внутри обычной функции: индексы есть, length есть, а методов массива нет. Раньше его превращали в массив через заимствованный slice; сегодня для этого есть Array.from и остаточные параметры, но старый приём вы встретите в любом легаси-коде.

function tag() {
  const args = Array.prototype.slice.call(arguments);
  console.log(args.length, args[0]);
}

tag("red", "green", "blue");