bind() в JavaScript

• Что такое bind()
• Синтаксис
• Привязка this
• bind() не вызывает функцию сразу
• Передача аргументов
• bind() в callback-функциях
• call(), apply() и bind()
• Итого

bind() - это метод функции, который создает новую функцию с заранее привязанным значением this.

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

let user = {
  name: 'Анна'
};

let showUserName = showName.bind(user);

showUserName();

Результат:

Анна

Функция showUserName() запомнила, что внутри нее this должен указывать на объект user.

Что такое bind()

bind() нужен, когда функцию нужно вызвать позже, но уже сейчас понятно, каким должен быть this.

function showRole() {
  console.log(this.name + ': ' + this.role);
}

let admin = {
  name: 'Игорь',
  role: 'admin'
};

let showAdminRole = showRole.bind(admin);

showAdminRole();

Результат:

Игорь: admin

Мы создали новую функцию showAdminRole(). При ее вызове this всегда будет указывать на объект admin.

Синтаксис

Запись выглядит так:

let newFunction = functionName.bind(thisValue, argument1, argument2);

Первый аргумент bind() - значение для this.

Следующие аргументы можно заранее передать в функцию.

Привязка this

Рассмотрим пример с объектом.

let user = {
  name: 'Мария',
  showName: function () {
    console.log(this.name);
  }
};

let showName = user.showName;

showName();

Если просто записать метод в переменную, связь с объектом теряется. В результате this уже не будет указывать на user.

Исправить это можно с помощью bind().

let user = {
  name: 'Мария',
  showName: function () {
    console.log(this.name);
  }
};

let showName = user.showName.bind(user);

showName();

Результат:

Мария

Теперь функция привязана к объекту user и может вызываться отдельно.

bind() не вызывает функцию сразу

Важное отличие bind() от call() и apply() в том, что bind() не запускает функцию сразу.

function greet() {
  console.log('Привет, ' + this.name + '!');
}

let user = {
  name: 'Анна'
};

let greetUser = greet.bind(user);

На этой строке функция еще не выполнилась.

greetUser();

Результат:

Привет, Анна!

Передача аргументов

Через bind() можно заранее передать не только this, но и часть аргументов.

function getInfo(city, job) {
  return this.name + ', ' + city + ', ' + job;
}

let user = {
  name: 'Ольга'
};

let getUserInfo = getInfo.bind(user, 'Москва');

console.log(getUserInfo('Frontend developer'));

Результат:

Ольга, Москва, Frontend developer

Значение ‘Москва’ уже было передано через bind(). При вызове осталось передать только профессию.

bind() в callback-функциях

bind() часто встречается там, где функцию передают как callback.

let user = {
  name: 'Игорь',
  showName: function () {
    console.log(this.name);
  }
};

setTimeout(user.showName.bind(user), 1000);

Метод showName() будет вызван позже, но благодаря bind(user) внутри него сохранится правильный this.

call(), apply() и bind()

call() вызывает функцию сразу и принимает аргументы через запятую.

getInfo.call(user, 'Москва', 'Frontend developer');

apply() тоже вызывает функцию сразу, но принимает аргументы массивом.

getInfo.apply(user, ['Москва', 'Frontend developer']);

bind() возвращает новую функцию, которую можно вызвать позже.

let getUserInfo = getInfo.bind(user, 'Москва');

getUserInfo('Frontend developer');

Итого

1. bind() возвращает новую функцию с привязанным this.

2. bind() не вызывает функцию сразу.

3. Новую функцию можно вызвать позже, и this внутри нее не потеряется.

4. Через bind() можно заранее передать часть аргументов.

5. bind() полезен, когда функцию передают как callback.