bind()在JavaScript中的用途是什么?
当前回答
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上的一个函数将单击回调连接到DOM事件,以下都是实现这一点的有效方法:
var myButton = {
... // As above
hookEvent(element) {
// Use bind() to ensure 'this' is the 'this' inside click()
element.addEventListener('click', this.click.bind(this));
}
};
Or:
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() });
}
};
Or:
var myButton = {
... // As above
hookEvent(element) {
// => functions do not change 'this', so you can use it directly
element.addEventListener('click', () => this.click());
}
};
其他回答
function.prototype.bind()接受Object。它将调用函数绑定到传递的Object,并返回相同的。当对象绑定到函数时,这意味着您将能够使用“this”关键字。
也可以说,
function.prototype.bind()用于提供/更改作用
让powerOfNumber=函数(数字){设乘积=1;for(设i=1;i<=this.power;i++){产品*=数量;}退货产品;}让powerOfTwo=powerOfNumber.bind({power:2});警报(powerOfTwo(2));让powerOfThree=powerOfNumber.bind({power:3});警报(powerOfThree(2));让powerOfFour=powerOfNumber.bind({power:4});警报(powerOfFour(2));
让我们试着理解这一点。
let powerOfNumber = function(number) {
let product = 1;
for (let i = 1; i <= this.power; i++) {
product *= number;
}
return product;
}
这里,在这个函数中,这对应于绑定到函数powerOfNumber的对象。目前,我们没有任何函数绑定到此函数。
让我们创建一个函数powerOfTwo,它将使用上面的函数查找数字的二次幂。
let powerOfTwo = powerOfNumber.bind({power:2});
alert(powerOfTwo(2));
这里使用bind将对象{power:2}传递给powerOfNumber函数。
bind函数将此对象绑定到powerOfNumber(),并将以下函数返回给powerOfTwo。现在,powerOfTwo看起来,
let powerOfNumber = function(number) {
let product = 1;
for(let i=1; i<=2; i++) {
product*=number;
}
return product;
}
因此,powerOfTwo将找到第二个电源。
请随意查看。
Javascript中的bind()函数
bind函数创建了一个新函数,其函数体和它所调用的函数相同。它是用这个参数调用的。为什么我们使用bind fun?:当每次创建一个新实例时,我们必须使用第一个初始实例,然后使用bind fun。我们不能重写bind fun.暗示它存储类的初始对象。
setInterval(this.animate_to.bind(this), 1000/this.difference);
绑定允许-
将“this”的值设置为特定对象。这变得非常有用,因为有时这不是预期的。重用方法咖喱函数
例如,您有一个扣除每月俱乐部费用的功能
function getMonthlyFee(fee){
var remaining = this.total - fee;
this.total = remaining;
return this.name +' remaining balance:'+remaining;
}
现在,您希望将此功能重新用于其他俱乐部成员。请注意,每个会员的月费会有所不同。
让我们想象一下Rachel的余额是500,每月会员费是90。
var rachel = {name:'Rachel Green', total:500};
现在,创建一个可以反复使用的函数,每月从她的账户中扣除费用
//bind
var getRachelFee = getMonthlyFee.bind(rachel, 90);
//deduct
getRachelFee();//Rachel Green remaining balance:410
getRachelFee();//Rachel Green remaining balance:320
现在,相同的getMonthlyFee函数可以用于另一个具有不同会费的会员。例如,Ross Geller的余额为250,每月费用为25
var ross = {name:'Ross Geller', total:250};
//bind
var getRossFee = getMonthlyFee.bind(ross, 25);
//deduct
getRossFee(); //Ross Geller remaining balance:225
getRossFee(); //Ross Geller remaining balance:200
考虑下面列出的简单程序,
//we create object user
let User = { name: 'Justin' };
//a Hello Function is created to Alert the object User
function Hello() {
alert(this.name);
}
//since there the value of this is lost we need to bind user to use this keyword
let user = Hello.bind(User);
user();
//we create an instance to refer the this keyword (this.name);
bind()的最简单用法是生成一个函数,无论它是如何被调用的。
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上的此链接:
函数.product.bind()
推荐文章
- jQuery中的live()转换为on()
- 如何区分鼠标的“点击”和“拖动”
- IE9是否支持console.log,它是一个真实的功能吗?
- Node.js同步执行系统命令
- 如何转义JSON字符串包含换行字符使用JavaScript?
- jQuery等价于JavaScript的addEventListener方法
- jQuery需要避免的陷阱
- JavaScript中变量字符串的XML解析
- 'React'指的是一个UMD全局,但当前文件是一个模块
- 为什么useState不触发重新渲染?
- 如何使用回调与useState挂钩在反应
- 网络请求失败
- 如何使用JavaScript大写字符串中每个单词的第一个字母?
- 如何使用箭头函数(公共类字段)作为类方法?
- 使用Javascript的atob解码base64不能正确解码utf-8字符串