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


当前回答

绑定允许-

将“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

其他回答

以下是最简单的解释:

说你有一个功能

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

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

重写如下:

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

注意现在有

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

现在可以这样调用函数:

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

就是这样。

最典型的用例:

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

回调不能有参数。

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

另一种用法是,可以将绑定函数作为参数传递给在另一个执行上下文下运行的另一个函数。

var name = "sample";
function sample(){
  console.log(this.name);
}
var cb = sample.bind(this);

function somefunction(cb){
  //other code
  cb();
}
somefunction.call({}, cb);

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®

绑定允许-

将“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

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()