Что такое call, apply и bind в JS?

Call, apply и bind в JavaScript

В JavaScript функции — это объекты, и методы call, apply и bind позволяют управлять контекстом их выполнения (значением this). Это ключевые инструменты для работы с объектно-ориентированным программированием и функциональным стилем.

Основная идея: управление контекстом this

const user = { name: 'Алексей' };

function greet() {
    console.log(`Привет, ${this.name}!`);
}

greet(); // Привет, undefined! (this === window или global)
greet.call(user); // Привет, Алексей! (this === user)

Все три метода изменяют то, на что ссылается this внутри функции. Без них this определяется по правилам вызова функции.

---

Метод .call()

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

function introduce(age, city) {
    console.log(`Меня зовут ${this.name}, мне ${age} лет, из ${city}`);
}

const person = { name: 'Мария' };

// Первый аргумент - контекст, остальные - параметры функции
introduce.call(person, 28, 'Москва'); // Меня зовут Мария, мне 28 лет, из Москва

Ключевые особенности:

• Немедленный вызов функции.
• Первый аргумент — значение для this.
• Параметры передаются индивидуально.

---

Метод .apply()

.apply() также немедленно вызывает функцию, но принимает аргументы для функции в виде одного массива (или массива-подобного объекта).

function sum(a, b, c) {
    return this.base + a + b + c;
}

const context = { base: 10 };
const numbers = [1, 2, 3];

console.log(sum.apply(context, numbers)); // 16 (10 + 1 + 2 + 3)

Отличия от .call():

• Второй аргумент — массив параметров.
• Исторически полезен при работе с переменным числом аргументов.

// Пример с Math.max, который не принимает массивы
const maxNumber = Math.max.apply(null, [5, 12, 8, 3]); // 12

---

Метод .bind()

.bind() не вызывает функцию сразу, а возвращает новую функцию, в которой this жестко связан с указанным значением. Это полезно для создания функций с фиксированным контекстом, особенно в обработчиках событий.

const car = {
    brand: 'Toyota',
    getBrand: function() {
        return this.brand;
    }
};

const standaloneFunc = car.getBrand;
console.log(standaloneFunc()); // undefined (this потеряно)

const boundFunc = car.getBrand.bind(car);
console.log(boundFunc()); // Toyota (this привязано к car)

Ключевые особенности:

• Возвращает новую функцию, не вызывая исходную.
• Контекст this фиксируется навсегда.
• Можно также предварительно задать часть аргументов (partial application).

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

const boundMultiply = multiply.bind({ coef: 2 }, 5); // Привязываем контекст и первый аргумент
console.log(boundMultiply(3)); // 30 (5 * 3 * 2)

---

Практическое применение и сравнение

// Сравнение всех трёх методов на одном примере
const obj = { value: 100 };

function calculate(a, b) {
    return this.value + a + b;
}

// call: аргументы отдельно
console.log(calculate.call(obj, 10, 20)); // 130

// apply: аргументы в массиве
console.log(calculate.apply(obj, [10, 20])); // 130

// bind: создаём новую функцию с фиксированным контекстом
const boundCalculate = calculate.bind(obj);
console.log(boundCalculate(10, 20)); // 130 (вызываем позже)

Когда использовать:

• .call() — когда нужно немедленно вызвать функцию с конкретным this и известными аргументами.
• .apply() — когда аргументы динамически формируются в массиве (например, из другого источника).
• .bind() — для создания callback-функций с сохранённым контекстом (обработчики событий, setTimeout, методы передаваемые как параметры).

Современная альтернатива

В ES6+ появились стрелочные функции, которые не имеют своего this и используют this окружающего контекста. Это часто делает .bind() менее необходимым:

// Старый стиль с bind
const handler = {
    message: 'Hello',
    init: function() {
        document.addEventListener('click', this.handleClick.bind(this));
    },
    handleClick: function() {
        console.log(this.message);
    }
};

// Новый стиль со стрелочной функцией
const modernHandler = {
    message: 'Hello',
    init: function() {
        document.addEventListener('click', () => this.handleClick());
    },
    handleClick: function() {
        console.log(this.message);
    }
};

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