Методы call, apply и bind в JavaScript
call, apply и bind — это методы в JavaScript, которые позволяют изменить контекст выполнения функции и задать значение this для любой функции, независимо от того, как она была вызвана. Все три метода связаны с привязкой контекста (this), но имеют некоторые различия в способе их использования.
Метод call
Метод call позволяет вызвать функцию с указанным контекстом и передать аргументы в виде списка (через запятую).
Синтаксис call
func.call(thisArg, arg1, arg2, ...);
Пример использования call
const person = {
name: "John"
};
function greet(greeting) {
console.log(greeting + ", " + this.name);
}
greet.call(person, "Hello"); // выведет "Hello, John"
В этом примере this внутри функции greet указывает на объект person, потому что мы использовали call для привязки контекста.
Метод apply
Метод apply работает аналогично методу call, но аргументы передаются в виде массива.
Синтаксис apply
func.apply(thisArg, [argsArray]);
Пример использования apply
const person = {
name: "John"
};
function greet(greeting, punctuation) {
console.log(greeting + ", " + this.name + punctuation);
}
greet.apply(person, ["Hello", "!"]); // выведет "Hello, John!"
В этом примере мы передаем аргументы как массив в метод apply.
Метод bind
Метод bind не вызывает функцию сразу. Он возвращает новую функцию, у которой заранее привязан контекст (this), а также заданные аргументы.
Синтаксис bind
const newFunc = func.bind(thisArg, arg1, arg2, ...);
Пример использования bind
const person = {
name: "John"
};
function greet(greeting) {
console.log(greeting + ", " + this.name);
}
const greetJohn = greet.bind(person); // создаем новую функцию с привязанным this
greetJohn("Hello"); // выведет "Hello, John"
Метод bind полезен, когда нужно заранее привязать контекст и передать функцию, которая будет вызвана позже.
Если вызвать bind несколько раз, то контекст будет привязан только один раз
const greetAgain = greet.bind(person).bind({ name: "Jane" });
greetAgain("Hi", "?"); // выведет "Hi, John?", потому что `bind` запоминает только первый контекст
Пример использования всех трех методов
const person = {
name: "John"
};
function greet(greeting, punctuation) {
console.log(greeting + ", " + this.name + punctuation);
}
// Использование call
greet.call(person, "Hello", "!");
// Использование apply
greet.apply(person, ["Hello", "!"]);
// Использование bind
const greetJohn = greet.bind(person, "Hello", "!");
greetJohn(); // выведет "Hello, John!"
Особенности bind:
Метод bind всегда возвращает новую функцию, в то время как call и apply сразу вызывают функцию с привязанным контекстом.