bind()在JavaScript中的用途是什么?


当前回答

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®

其他回答

摘要:

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”

一旦函数被绑定到特定的这个值,我们就可以传递它,甚至可以将它放到其他对象的财产中。其价值将保持不变。

从Function.pr原型.bind()上的MDN文档中:

bind()方法创建一个新函数,当调用该函数时此关键字设置为提供的值,具有给定的序列调用新函数时提供的任何参数之前的参数。

那是什么意思?!

好吧,让我们来做一个如下的函数:

var logProp = function(prop) {
    console.log(this[prop]);
};

现在,让我们看一个像这样的对象:

var Obj = {
    x : 5,
    y : 10
};

我们可以像这样将函数绑定到对象:

Obj.log = logProp.bind(Obj);

现在,我们可以在代码中的任何位置运行Obj.log:

Obj.log('x'); // Output : 5
Obj.log('y'); // Output : 10

这是有效的,因为我们将其值绑定到对象Obj。


它真正有趣的地方是,当你不仅为它绑定一个值,而且为它的参数属性绑定一个:

Obj.logX = logProp.bind(Obj, 'x');
Obj.logY = logProp.bind(Obj, 'y');

我们现在可以这样做:

Obj.logX(); // Output : 5
Obj.logY(); // Output : 10

与Obj.log不同,我们不必传递x或y,因为我们在绑定时传递了这些值。

以下是最简单的解释:

说你有一个功能

function _loop(n) { console.log("so: " + n) }

显然,您可以像往常一样将其称为loop(69)。

重写如下:

var _loop = function() { console.log("so: " + this.n) }

注意现在有

无此类参数使用“this”获取命名参数

现在可以这样调用函数:

 _loop.bind( {"n": 420} )

就是这样。

最典型的用例:

真正典型的用法是需要向回调中添加参数。

回调不能有参数。

因此,只需如上所述“重写”回调。

除上述内容外,bind()方法还允许对象从另一个对象借用方法,而无需复制该方法。这在JavaScript中称为函数借用。

/**
 * 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