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

1️⃣ Как кратко ответить

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

2️⃣ Подробное объяснение темы

В JavaScript функции являются объектами, и у них есть методы, которые позволяют управлять контекстом их выполнения. Это особенно важно, когда нужно явно указать, какой объект должен быть this внутри функции. Методы call, apply и bind предоставляют такие возможности.

call

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

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}
​
const person = { name: 'Alice' };
​
greet.call(person, 'Hello', '!'); // Вывод: "Hello, Alice!"

• greet.call(person, 'Hello', '!'): вызывает функцию greet, устанавливая this равным объекту person. Аргументы greeting и punctuation передаются по отдельности.

apply

Метод apply похож на call, но принимает аргументы в виде массива.

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}
​
const person = { name: 'Bob' };
​
greet.apply(person, ['Hi', '.']); // Вывод: "Hi, Bob."

• greet.apply(person, ['Hi', '.']): вызывает функцию greet, устанавливая this равным объекту person. Аргументы передаются в виде массива.

bind

Метод bind не вызывает функцию сразу. Вместо этого он возвращает новую функцию, с установленным значением this, которую можно вызвать позже.

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}
​
const person = { name: 'Charlie' };
​
const greetCharlie = greet.bind(person);
​
greetCharlie('Hey', '?'); // Вывод: "Hey, Charlie?"

• greet.bind(person): возвращает новую функцию, в которой this всегда будет равен объекту person.
• greetCharlie('Hey', '?'): вызывает новую функцию, передавая аргументы greeting и punctuation.

Зачем это нужно

Эти методы полезны, когда нужно управлять контекстом выполнения функции. Например, в обработчиках событий, где this может указывать на элемент DOM, или при использовании функций обратного вызова, где важно сохранить контекст объекта.

Применение

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