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

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

call, apply и bind — это методы в JavaScript, которые позволяют управлять контекстом выполнения функции. 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, 'Hey');
greetCharlie('!'); // Выведет: "Hey, Charlie!"

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

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

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