bind()在JavaScript中的用途是什么?
当前回答
通过将参数绑定到值来创建新函数
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 is a method inherited from Function.prototype same like call and apply
* It basically helps to bind a function to an object's context during initialisation
*
* */
window.myname = "Jineesh";
var foo = function(){
return this.myname;
};
//IE < 8 has issues with this, supported in ecmascript 5
var obj = {
myname : "John",
fn:foo.bind(window)// binds to window object
};
console.log( obj.fn() ); // Returns Jineesh
摘要:
bind()方法将对象作为第一个参数,并创建一个新函数。当调用函数时,函数体中this的值将是在bind()函数中作为参数传入的对象。
这在JS中是如何工作的
javascript中this的值始终取决于调用函数的对象。此值始终指调用函数的点左侧的对象。对于全局范围,这是窗口(或nodeJS中的全局)。只有调用、应用和绑定才能以不同方式更改此绑定。下面是一个示例,说明this关键字的工作原理:
让obj={prop1:1,func:function(){console.log(this);}}obj.func();//obj位于点的左侧,因此这是指obj常量customFunc=obj.func;//我们将函数存储在customFunc对象中customFunc();//现在点左边的对象是窗口,//customFunc()是window.customFunc(//因此,将记录窗口
如何使用绑定?
Bind可以帮助克服使用此关键字时遇到的困难,方法是在此处指定一个固定的对象。例如:
var name='globalName';常量对象={name:'myName',sayName:function(){console.log(this.name);}}常量say=obj.sayName;//我们只是存储函数,它的值不会被神奇地传递say();//现在,由于此函数在全局范围内执行,因此将引用全局变量const-boundSay=obj.sayName.bind(obj);//现在,this的值被绑定到obj对象bounday();//现在,这将引用obj对象中的名称:“myName”
一旦函数被绑定到特定的这个值,我们就可以传递它,甚至可以将它放到其他对象的财产中。其价值将保持不变。
我没有读过上面的代码,但我学到了一些简单的东西,所以我想在这里分享一下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(“日”,“夜”)
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()函数
以下是最简单的解释:
说你有一个功能
function _loop(n) { console.log("so: " + n) }
显然,您可以像往常一样将其称为loop(69)。
重写如下:
var _loop = function() { console.log("so: " + this.n) }
注意现在有
无此类参数使用“this”获取命名参数
现在可以这样调用函数:
_loop.bind( {"n": 420} )
就是这样。
最典型的用例:
真正典型的用法是需要向回调中添加参数。
回调不能有参数。
因此,只需如上所述“重写”回调。
推荐文章
- 我如何检查如果一个变量是JavaScript字符串?
- 如何检测如果多个键被按下一次使用JavaScript?
- 如何通过history. pushstate获得历史变化的通知?
- 使用jQuery改变输入字段的类型
- 在JavaScript中,什么相当于Java的Thread.sleep() ?
- 使用jQuery以像素为整数填充或边距值
- 检查是否选择了jQuery选项,如果没有选择默认值
- Next.js React应用中没有定义Window
- 如何重置笑话模拟函数调用计数之前,每次测试
- 如何强制一个功能React组件渲染?
- 在javascript中从平面数组构建树数组
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 如何在AngularJS中观察路由变化?
- JavaScript DOM删除元素
- 将dd-mm-yyyy字符串转换为日期