Методи call, apply та bind у JavaScript

call, apply та bind — це методи в JavaScript, які дозволяють змінювати контекст виконання функції та встановлювати значення this для будь-якої функції, незалежно від того, як вона була викликана. Усі три методи пов'язані з прив'язкою контексту (this), але мають деякі відмінності у використанні.

Метод call

Метод call дозволяє викликати функцію з вказаним контекстом і передавати аргументи у вигляді списку (через кому).

Синтаксис call

javascript

func.call(thisArg, arg1, arg2, ...);

Приклад використання call

javascript

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

javascript

func.apply(thisArg, [argsArray]);

Приклад використання apply

javascript

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

javascript

const newFunc = func.bind(thisArg, arg1, arg2, ...);

Приклад використання bind

javascript

const person = {
  name: "John"
};

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

const greetJohn = greet.bind(person); // створює нову функцію з прив'язаним this
greetJohn("Hello"); // виведе "Hello, John"

Метод bind корисний, коли вам потрібно прив'язати контекст заздалегідь і передати функцію, яка буде викликана пізніше.

Якщо ви викликаєте bind кілька разів, контекст буде прив'язаний лише один раз

javascript

const greetAgain = greet.bind(person).bind({ name: "Jane" });
greetAgain("Hi", "?"); // виведе "Hi, John?", оскільки `bind` запам'ятовує лише перший контекст

Приклад використання всіх трьох методів

javascript

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 негайно викликають функцію з прив'язаним контекстом.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань