В чем разница между bind и apply в JavaScript?

В чем разница между bind и apply в JavaScript?

bind, apply и call — три метода для управления контекстом (this) в JavaScript. Хотя они похожи, каждый используется в разных ситуациях.

Основные различия

Быстрый пример

const person = {
  firstName: 'Иван',
  lastName: 'Петров',
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
};

const anotherPerson = {
  firstName: 'Мария',
  lastName: 'Сидорова'
};

// call — вызывает сразу с одноименным контекстом
person.fullName.call(anotherPerson); // "Мария Сидорова"

// apply — вызывает сразу с контекстом и массивом аргументов
person.fullName.apply(anotherPerson); // "Мария Сидорова"

// bind — возвращает новую функцию с закреплённым контекстом
const boundName = person.fullName.bind(anotherPerson);
boundName(); // "Мария Сидорова"

Подробный разбор bind

bind создаёт новую функцию с фиксированным контекстом (this) и опциональными аргументами.

function greet(greeting, punctuation) {
  return greeting + ', ' + this.name + punctuation;
}

const person = { name: 'Иван' };

// bind создаёт новую функцию
const greetIvan = greet.bind(person, 'Привет');

// Вызываем новую функцию
greetIvan('!'); // "Привет, Иван!"

Практические примеры bind

Пример 1: Сохранение контекста в обработчиках событий

class Button {
  constructor(label) {
    this.label = label;
    this.button = document.querySelector('button');
    
    // Без bind: this будет ссылаться на элемент button, не на объект
    // this.button.addEventListener('click', this.onClick);
    
    // С bind: this ссылается на объект Button
    this.button.addEventListener('click', this.onClick.bind(this));
  }
  
  onClick() {
    console.log('Клик на кнопке:', this.label);
  }
}

new Button('Отправить');

Пример 2: Частичное применение функции (currying)

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

const double = multiply.bind(null, 2);
double(5); // 10
double(10); // 20

const triple = multiply.bind(null, 3);
triple(5); // 15

Пример 3: Использование в массивных методах

const user = {
  users: ['Иван', 'Мария', 'Петр'],
  
  printAll() {
    // map требует функцию, которая вызывается с определённым контекстом
    this.users.forEach(function(user) {
      console.log(user + ' в списке ' + this.users.length);
    }.bind(this)); // bind фиксирует контекст
  }
};

user.printAll();

Отличие bind от call/apply

call и apply вызывают функцию сразу:

const person = { name: 'Иван' };

function getName() {
  console.log(this.name);
}

getName.call(person); // Выведет: "Иван" (вызов сразу)
getName.apply(person); // Выведет: "Иван" (вызов сразу)

const boundGetName = getName.bind(person);
boundGetName(); // Выведет: "Иван" (вызов позже)

Более практичный пример

Работа с HTTP запросами:

class UserService {
  constructor(private http: HttpClient) {}
  
  fetchUser(id: number) {
    return this.http.get(`/api/users/${id}`);
  }
}

class UserComponent {
  constructor(private userService: UserService) {}
  
  ngOnInit() {
    // Ошибка: потеря контекста this
    // this.userService.fetchUser(1).subscribe(handleSuccess);
    
    // Решение 1: bind
    this.userService.fetchUser(1).subscribe(
      this.handleSuccess.bind(this)
    );
    
    // Решение 2: стрелочная функция (лучше)
    this.userService.fetchUser(1).subscribe(
      (data) => this.handleSuccess(data)
    );
  }
  
  handleSuccess(data: any) {
    console.log(this); // Правильный контекст
  }
}

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

call/apply:

• Одноразовый вызов функции с другим контекстом
• Форвардинг вызовов между объектами
• Заимствование методов

// Пример: используем метод Array в строке
const message = 'Hello';
const chars = Array.prototype.slice.call(message); // ['H', 'e', 'l', 'l', 'o']

bind:

• Сохранение контекста для будущего использования
• Event listeners в классах
• Частичное применение функции (currying)
• Callback функции, которые будут вызваны позже

Современный подход

В современном JavaScript часто используют стрелочные функции, которые автоматически сохраняют контекст this из внешней области:

// Вместо bind
button.addEventListener('click', this.onClick.bind(this));

// Используем стрелку
button.addEventListener('click', () => this.onClick());

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