使用JavaScript的“绑定”方法

在JavaScript中使用bind()什么用?

绑定创build一个新的函数,将this设置为传递给bind()的第一个参数。

下面是一个例子,展示了如何使用bind来传递一个正确的成员方法:

 var Button = function(content) { this.content = content; }; Button.prototype.click = function() { console.log(this.content + ' clicked'); } var myButton = new Button('OK'); myButton.click(); var looseClick = myButton.click; looseClick(); // not bound, 'this' is not myButton - it is the global object var boundClick = myButton.click.bind(myButton); boundClick(); // bound, 'this' is myButton 

打印出来:

 OK clicked undefined clicked OK clicked 

您也可以在第一个( this )参数之后添加额外的参数, bind将把这些值传递给原始函数。 稍后传递给绑定函数的任何附加参数将在绑定的参数之后传入:

 // Example showing binding some parameters var sum = function(a, b) { return a + b; }; var add5 = sum.bind(null, 5); console.log(add5(10)); 

打印出来:

 15 

检查JavaScript函数绑定更多的信息和交互式的例子。

绑定允许 –

  • 将“this”的值设置为特定的对象。 这变得非常有用,因为有时这不是预期的。
  • 重用方法
  • 咖喱function

例如,您可以扣除每月的俱乐部费用

 function getMonthlyFee(fee){ var remaining = this.total - fee; this.total = remaining; return this.name +' remaining balance:'+remaining; } 

现在您想要为不同的俱乐部会员重复使用此function。 请注意,每个月的费用因会员而异。

让我们想象一下Rachel的余额为500,每月的会费为90。

 var rachel = {name:'Rachel Green', total:500}; 

现在,创build一个可以反复使用的function,每月从她的账户中扣除费用

 //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()最简单的用法是创build一个函数,不pipe它如何被调用,都被调用一个特定的值。

 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 

请参阅此链接了解更多信息

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Function.prototype.bind() 的MDN文档

bind()方法创build一个新的函数,当被调用的时候,它的this关键字被设置为提供的值,并且在调用新函数之前提供给定的参数序列。

那么,这是什么意思?

那么,让我们看看这样的function:

 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


如果真的有趣的是,当你不仅为this价值绑定一个价值,而且为它的论据prop

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

我们现在可以做到这一点:

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

Obj.log不同,我们不必传递xy ,因为我们在绑定的时候传递了这些值。

我将在理论上和实际上解释绑定

绑定在JavaScript是一种方法 – Function.prototype.bind。 绑定是一种方法。 它被称为函数原型。 这个方法创build一个函数,其主体类似于被调用的函数,但是“this”指向传递给bind方法的第一个参数。 它的语法是

  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()方法创build一个新的函数实例,该实例的值绑定到传递给bind()的值。 例如:

  window.color = "red"; var o = { color: "blue" }; function sayColor(){ alert(this.color); } var objectSayColor = sayColor.bind(o); objectSayColor(); //blue 

这里,通过调用bind()并传入对象o,从sayColor()创build一个名为objectSayColor()的新函数。 objectSayColor()函数有一个相当于o的值,所以调用该函数,即使是全局调用,也会显示string“blue”。

参考:尼古拉斯C. Zakas – 专业JAVASCRIPT®为WEB开发者

通过将参数绑定到值来创build一个新的函数

bind方法从另一个函数创build一个新的函数,其中一个或多个参数绑定到特定的值,包括隐含的this参数。

部分应用

这是部分应用的一个例子。 通常我们提供一个函数,它的所有参数都会产生一个值。 这被称为function应用程序。 我们正在将这个函数应用到它的参数中。

高阶函数(HOF)

部分应用程序是高阶函数 (HOF)的一个例子,因为它会产生一个less数参数的新函数。

绑定多个参数

您可以使用bind将具有多个参数的函数转换为新的函数。

 function multiply(x, y) { return x * y; } let multiplyBy10 = multiply.bind(null, 10); console.log(multiplyBy10(5)); 

如前所述, Function.bind()允许您指定函数将执行的上下文(也就是说,它可以让您在函数体中传递this关键字将parsing的对象)。

几个类似的工具包API方法执行类似的服务:

jQuery.proxy()

Dojo.hitch()

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

绑定函数创build一个新的函数,它具有与其调用的函数相同的函数体。使用这个参数调用它,为什么我们使用绑定函数。 :每当创build一个新的实例时,我们必须使用第一个初始实例,然后我们使用bind fun.We不能重写bind fun.simply它存储类的初始对象。

setInterval(this.animate_to.bind(this),1000 / this.difference);

variables有局部和全局范围,假设我们有两个同名的variables,一个是全局定义的,另一个是在函数闭包内部定义的,我们想要调用函数闭包内的那个variables值,然后我们使用这个绑定方法。 请看下面的简单例子:

  var x = 9; // this refers to global "window" object here in the browser var person = { x: 81, getX: function() { return this.x; } }; var y = person.getX; // It will return 9, because it will call global value of x(var x=9). var x2 = y.bind(person); // It will return 81, because it will call local value of x, which is defined in the object called person(x=81). document.getElementById("demo1").innerHTML = y(); document.getElementById("demo2").innerHTML = x2(); 
 <!DOCTYPE html> <html> <body> <p id="demo1">0</p> <p id="demo2">0</p> </body> </html>