使用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
不同,我们不必传递x
或y
,因为我们在绑定的时候传递了这些值。
我将在理论上和实际上解释绑定
绑定在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>