Bind создает новую функцию, в которой this будет установлен первый параметр, переданный в bind().

Вот пример, который показывает, как использовать bind для передачи метода-члена, который имеет правильный this:

var Button = function(content) { 
  this.content = content;
};
Button.prototype.click = function() {
  console.log(this.content + ' clicked');
};

var myButton = new Button('OK');
myButton.click();

var looseClick = myButton.click;
looseClick(); // not bound, 'this' is not myButton - it is the global object

var boundClick = myButton.click.bind(myButton);
boundClick(); // bound, 'this' is myButton

, который печатает:

OK clicked
undefined clicked
OK clicked

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

// Example showing binding some parameters
var sum = function(a, b) {
  return a + b;
};

var add5 = sum.bind(null, 5);
console.log(add5(10));

Что выводит:

15

Извлечение Функция JavaScript JavaScript bind для получения дополнительной информации и интерактивных примеров.

Обновление: ECMAScript 2015 добавляет поддержку функций =>. Функции => более компактны и не изменяют указатель this по сравнению с их областью определения, поэтому вам может не понадобиться использовать bind() так часто. Например, если вы хотите, чтобы функция из Button из первого примера подключала обратный вызов click к событию DOM, все следующие допустимые способы сделать это:

Button.prototype.hookEvent(element) {
  // Use bind() to ensure 'this' is the 'this' inside click()
  element.addEventListener('click', this.click.bind(this));
};

Или:

Button.prototype.hookEvent(element) {
  // Use a new variable for 'this' since 'this' inside the function
  // will not be the 'this' inside hookEvent()
  var me = this;
  element.addEventListener('click', function() { me.click() });
}

Или:

Button.prototype.hookEvent(element) {
  // => functions do not change 'this', so you can use it directly
  element.addEventListener('click', () => this.click());
}

Создание новой функции путем привязки аргументов к значениям

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

Частичное применение

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

Функция высшего порядка (HOF)

Частичное применение является примером функции высшего порядка (HOF), поскольку она дает новую функцию с меньшим количеством аргументов ,

Связывание нескольких аргументов

Вы можете использовать bind для преобразования функций с несколькими аргументами в новые функции.

function multiply(x, y) { 
    return x * y; 
}

let multiplyBy10 = multiply.bind(null, 10);
console.log(multiplyBy10(5));

Преобразование из метода экземпляра в статическую функцию

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

function Multiplier(factor) { 
    this.factor = factor;
}

Multiplier.prototype.multiply = function(x) { 
    return this.factor * x; 
}

function ApplyFunction(func, value) {
    return func(value);
}

var mul = new Multiplier(5);

// Produces garbage (NaN) because multiplying "undefined" by 10
console.log(ApplyFunction(mul.multiply, 10));

// Produces expected result: 50
console.log(ApplyFunction(mul.multiply.bind(mul), 10));

Реализация StateBall CallBack

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

function ButtonPressedLogger()
{
   this.count = 0;
   this.onPressed = function() {
      this.count++;
      console.log("pressed a button " + this.count + " times");
   }
   for (let d of document.getElementsByTagName("button"))
      d.onclick = this.onPressed.bind(this);
}

new ButtonPressedLogger();      

<button>press me</button>
<button>no press me</button>

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

var name = "sample";
function sample(){
  console.log(this.name);
}
var cb = sample.bind(this);

function somefunction(cb){
  //other code
  cb();
}
somefunction.call({}, cb);