使用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>
