Bind створює нову функцію, яка змусить thisвнутрішню функцію передати параметр bind().
Ось приклад, який показує, як використовувати bindдля передачі метод члена навколо, який має правильне this:
var myButton = {
content: 'OK',
click() {
console.log(this.content + ' clicked');
}
};
myButton.click();
var looseClick = myButton.click;
looseClick(); // not bound, 'this' is not myButton - it is the globalThis
var boundClick = myButton.click.bind(myButton);
boundClick(); // bound, 'this' is myButton
Що виводить:
OK clicked
undefined clicked
OK clicked
Ви також можете додати додаткові параметри після першого 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, наведені нижче є всі дійсні способи цього:
var myButton = {
... // As above
hookEvent(element) {
// Use bind() to ensure 'this' is the 'this' inside click()
element.addEventListener('click', this.click.bind(this));
}
};
Або:
var myButton = {
... // As above
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() });
}
};
Або:
var myButton = {
... // As above
hookEvent(element) {
// => functions do not change 'this', so you can use it directly
element.addEventListener('click', () => this.click());
}
};
select = document.querySelector.bind(document)