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

从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,因为我们在绑定时传递了这些值。

我将从理论上和实践上解释bind

javascript中的bind是一种方法--Function.prototype.bind.bind是一个方法。它是在函数原型上调用的。此方法创建一个函数,其主体与调用该函数的函数相似,但“This”引用传递给绑定方法的第一个参数。其语法为

     var bindedFunc = Func.bind(thisObj,optionsArg1,optionalArg2,optionalArg3,...);

示例:--

  var checkRange = function(value){
      if(typeof value !== "number"){
              return false;
      }
      else {
         return value >= this.minimum && value <= this.maximum;
      }
  }

  var range = {minimum:10,maximum:20};

  var boundedFunc = checkRange.bind(range); //bounded Function. this refers to range
  var result = boundedFunc(15); //passing value
  console.log(result) // will give true;

通过将参数绑定到值来创建新函数

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>

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