JavaScript 'bind' 方法有什么用?
2022-08-29 22:28:07
在 JavaScript 中有什么用?bind()
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 添加了对函数的支持。 函数更紧凑,并且不会从其定义范围更改指针,因此您可能不需要经常使用。例如,如果您希望第一个示例中的函数 on 将回调挂接到 DOM 事件,则以下是执行此操作的所有有效方法:=>
=>
this
bind()
Button
click
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());
}
};
最简单的用法是创建一个函数,无论它是如何调用的,都是用特定的值调用的。bind()
this
x = 9;
var module = {
x: 81,
getX: function () {
return this.x;
}
};
module.getX(); // 81
var getX = module.getX;
getX(); // 9, because in this case, "this" refers to the global object
// create a new function with 'this' bound to module
var boundGetX = getX.bind(module);
boundGetX(); // 81
请参阅MDN Web Docs上的此链接以获取更多信息: