bind()在JavaScript中的用途是什么?
当前回答
以下是最简单的解释:
说你有一个功能
function _loop(n) { console.log("so: " + n) }
显然,您可以像往常一样将其称为loop(69)。
重写如下:
var _loop = function() { console.log("so: " + this.n) }
注意现在有
无此类参数使用“this”获取命名参数
现在可以这样调用函数:
_loop.bind( {"n": 420} )
就是这样。
最典型的用例:
真正典型的用法是需要向回调中添加参数。
回调不能有参数。
因此,只需如上所述“重写”回调。
其他回答
我没有读过上面的代码,但我学到了一些简单的东西,所以我想在这里分享一下bind方法,我们可以将它用作任何普通方法。
<pre> note: do not use arrow function it will show error undefined </pre>
让solarSystem={太阳:“红色”,moon:“白色”,sunmoon:函数(){let dayNight=this.sun+'是太阳的颜色,在白天呈现,'+this.moon+'是月亮的颜色,晚上呈现';返回日夜间;}}让工作=功能(工作,睡眠){console.log(this.sunmoon());//访问solatSystem直到现在都显示错误undefine suncommon,因为我们无法直接访问我们使用的.bind()console.log('我在'+work+'中工作,在'+sleep中睡眠);}let outPut=work.bind(solarSystem);outPut(“日”,“夜”)
通过将参数绑定到值来创建新函数
bind方法从另一个函数创建一个新函数,其中一个或多个参数绑定到特定值,包括隐式this参数。
局部应用
这是部分应用的示例。通常,我们提供一个函数及其所有参数,这些参数会产生一个值。这就是所谓的函数应用程序。我们正在将函数应用于其参数。
高阶函数(HOF)
部分应用程序是高阶函数(HOF)的一个例子,因为它生成了一个新函数,但参数数量较少。
绑定多个参数
可以使用bind将具有多个参数的函数转换为新函数。
函数乘法(x,y){返回x*y;}让multiplyBy10=multiply.bind(null,10);控制台日志(multiplyBy10(5));
从实例方法转换为静态函数
在最常见的用例中,当使用一个参数调用时,bind方法将创建一个新函数,该函数将此值绑定到特定值。实际上,这将实例方法转换为静态方法。
函数乘数(因子){this.factor=系数;}Multiplier.prototype.multiply=函数(x){返回this.factor*x;}函数ApplyFunction(func,value){返回func(值);}var mul=新乘数(5);//生成垃圾(NaN),因为将“undefined”乘以10console.log(ApplyFunction(多个,10));//产生预期结果:50console.log(ApplyFunction(多乘绑定(多),10));
实现有状态回调
以下示例显示了如何使用this的绑定使对象方法充当回调,从而可以轻松更新对象的状态。
函数ButtonPressedLogger(){此计数=0;this.onPressed=函数(){这个.计数++;console.log(“按下按钮”+this.count+“次数”);}for(let d of document.getElementsByTagName(“button”))d.onclick=this.onPressed.bind(this);}new ButtonPressedLogger();<button>按我</button><button>不按我</button>
除上述内容外,bind()方法还允许对象从另一个对象借用方法,而无需复制该方法。这在JavaScript中称为函数借用。
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(的值绑定。例如:
window.color = "red";
var o = { color: "blue" };
function sayColor(){
alert(this.color);
}
var objectSayColor = sayColor.bind(o);
objectSayColor(); //blue
在这里,通过调用bind()并传入对象o,从sayColor()创建了一个名为objectSayColor)的新函数。objectSayCcolor()函数的这个值相当于o,因此即使作为全局调用调用该函数,也会显示字符串“blue”。
参考资料:Nicholas C.Zakas-面向WEB开发人员的专业JAVASCRIPT®
推荐文章
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何禁用文本选择使用jQuery?
- 如何停止事件冒泡复选框点击
- 如何在PHP中截断字符串最接近于一定数量的字符?
- 向对象数组添加属性
- 如何在Redux应用程序中动态加载代码分割的减速器?