В чём разница между методами call, apply и bind?

Разница между методами call, apply и bind

Эти три метода — основные инструменты для управления контекстом this в JavaScript. Все три существуют на прототипе Function и позволяют вызвать функцию с явно заданным значением this. Однако они работают по-разному.

call()

Метод call вызывает функцию немедленно, передавая контекст и аргументы по одному.

function greet(greeting, punctuation) {
  console.log(greeting + ", " + this.name + punctuation);
}

const person = { name: "Алиса" };

greet.call(person, "Привет", "!"); // "Привет, Алиса!"

Сигнатура: func.call(thisArg, arg1, arg2, ...)

apply()

Метод apply похож на call, но аргументы передаются в виде массива. Это удобно, когда у вас уже есть массив параметров.

function greet(greeting, punctuation) {
  console.log(greeting + ", " + this.name + punctuation);
}

const person = { name: "Боб" };
const args = ["Добрый день", "?"];

greet.apply(person, args); // "Добрый день, Боб?"

Сигнатура: func.apply(thisArg, [arg1, arg2, ...])

bind()

Метод bind не вызывает функцию немедленно. Вместо этого он возвращает новую функцию с привязанным контекстом this. Это особенно полезно для обработчиков событий и callbacks.

function greet(greeting, punctuation) {
  console.log(greeting + ", " + this.name + punctuation);
}

const person = { name: "Виктор" };

const boundGreet = greet.bind(person, "Привет");
boundGreet("!"); // "Привет, Виктор!"

// Даже если вызвать с новым контекстом, this остаётся привязанным
boundGreet.call({name: "Другой"}, "?"); // "Привет, Виктор?" — this всё еще Victor

Сигнатура: func.bind(thisArg, arg1, arg2, ...) возвращает новую функцию.

Практические примеры

Событие, требующее контекста:

const user = {
  name: "Маша",
  handleClick() {
    console.log("Кликнула:", this.name);
  }
};

// Без bind — потеряется контекст
button.addEventListener("click", user.handleClick); // undefined

// С bind — сработает правильно
button.addEventListener("click", user.handleClick.bind(user));

Использование apply для нахождения максимума в массиве:

const numbers = [5, 3, 9, 1];
const max = Math.max.apply(null, numbers); // 9
// Эквивалент spread: Math.max(...numbers)

Создание функции-обёртки с call:

function multiply(a, b) {
  return a * b;
}

function logResult(a, b) {
  const result = multiply.call(this, a, b);
  console.log("Результат:", result);
  return result;
}

logResult(3, 4); // Результат: 12

Резюме

В современном JavaScript bind используется чаще всего, особенно в React-компонентах, хотя там уже привычнее arrow functions. call и apply полезны для утилитарных функций и работы с встроенными методами массивов и объектов.