bind()
在JavaScript中有什么用?
JavaScript的“绑定”方法有什么用?
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()的新函数。objectSayColor()函数的this值等于o,因此调用该函数(即使是全局调用)也将导致显示字符串“ blue”。
参考:Nicholas C. Zakas-Web开发人员的专业JAVASCRIPT®
如前所述,Function.bind()
让您指定函数将在其中执行的上下文(即,它使您可以将this
关键字将解析到的对象传递给函数主体。
两种类似的工具包API方法,它们执行类似的服务:
通过将参数绑定到值来创建新函数
该bind
方法从另一个函数创建一个新函数,其中一个或多个参数绑定到特定值,包括隐式this
参数。
部分申请
这是部分应用的示例。通常我们提供一个带有所有参数的函数,该函数产生一个值。这就是所谓的功能应用程序。我们正在将该函数应用于其参数。
高阶函数(HOF)
部分应用程序是高阶函数(HOF)的一个示例,因为它产生的新函数具有较少的参数。
绑定多个参数
您可以bind
用来将具有多个参数的函数转换为新函数。
function multiply(x, y) {
return x * y;
}
let multiplyBy10 = multiply.bind(null, 10);
console.log(multiplyBy10(5));
从实例方法转换为静态函数
在最常见的用例中,当使用一个参数调用该bind
方法时,该方法将创建一个新函数,该函数具有this
绑定到特定值的值。实际上,这会将实例方法转换为静态方法。
function Multiplier(factor) {
this.factor = factor;
}
Multiplier.prototype.multiply = function(x) {
return this.factor * x;
}
function ApplyFunction(func, value) {
return func(value);
}
var mul = new Multiplier(5);
// Produces garbage (NaN) because multiplying "undefined" by 10
console.log(ApplyFunction(mul.multiply, 10));
// Produces expected result: 50
console.log(ApplyFunction(mul.multiply.bind(mul), 10));
实施有状态回调
下面的示例说明如何使用绑定this
可以使对象方法充当可以轻松更新对象状态的回调。
function ButtonPressedLogger()
{
this.count = 0;
this.onPressed = function() {
this.count++;
console.log("pressed a button " + this.count + " times");
}
for (let d of document.getElementsByTagName("button"))
d.onclick = this.onPressed.bind(this);
}
new ButtonPressedLogger();
<button>press me</button>
<button>no press me</button>
我将在理论上和实践上解释绑定
javascript中的bind是一种方法-Function.prototype.bind。绑定是一种方法。它被称为函数原型。此方法创建一个函数,其主体与调用该函数的主体相似,但是“ 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()方法。请参见下面的简单示例:
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();
<p id="demo1">0</p>
<p id="demo2">0</p>
Another usage is that you can pass binded function as an argument to another function which is operating under another execution context.