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 для получения дополнительной информации и интерактивных примеров.
Обновление: в 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());
}