Javascript调用()&apply()vs bind()?
我已经知道apply
和call
是设置this
类似函数(函数的上下文)。
区别在于我们发送参数的方式(手动vs数组)
题:
但是什么时候应该使用bind()
方法?
var obj = {
x: 81,
getX: function() {
return this.x;
}
};
alert(obj.getX.bind(obj)());
alert(obj.getX.call(obj));
alert(obj.getX.apply(obj));
jsbin
当您希望稍后使用特定上下文来调用该函数时,可以使用.bind()
,这在事件中很有用。 当想要立即调用函数时使用.apply()
.call()
或.apply()
,并修改上下文。
调用/应用程序立即调用该函数,而bind
返回一个函数,稍后执行时,该函数将具有用于调用原始函数的正确上下文集。 这样你可以在异步回调和事件中维护上下文。
我做了很多:
function MyObject(element) {
this.elm = element;
element.addEventListener('click', this.onClick.bind(this), false);
};
MyObject.prototype.onClick = function(e) {
var t=this; //do something with [t]...
//without bind the context of this function wouldn't be a MyObject
//instance as you would normally expect.
};
我在Node.js中广泛使用它来进行异步回调,我想要传递成员方法,但仍希望上下文成为启动异步操作的实例。
一个简单,天真的绑定实现就像:
Function.prototype.bind = function(ctx) {
var fn = this;
return function() {
fn.apply(ctx, arguments);
};
};
还有更多(如传递其他参数),但您可以阅读更多内容并查看MDN上的实际实现。
希望这可以帮助。
它们都将它附加到函数(或对象)中,差异在函数调用中(见下文)。
调用附加到这个函数并立即执行的功能:
var person = {
name: "James Smith",
hello: function(thing) {
console.log(this.name + " says hello " + thing);
}
}
person.hello("world"); // output: "James Smith says hello world"
person.hello.call({ name: "Jim Smith" }, "world"); // output: "Jim Smith says hello world"
绑定附加到这个函数和其需要被这样分开调用:
var person = {
name: "James Smith",
hello: function(thing) {
console.log(this.name + " says hello " + thing);
}
}
person.hello("world"); // output: "James Smith says hello world"
var helloFunc = person.hello.bind({ name: "Jim Smith" });
helloFunc("world"); // output: Jim Smith says hello world"
或者像这样:
...
var helloFunc = person.hello.bind({ name: "Jim Smith" }, "world");
helloFunc(); // output: Jim Smith says hello world"
apply类似于调用,只不过它需要一个类似数组的对象,而不是一次列出一个参数:
function personContainer() {
var person = {
name: "James Smith",
hello: function() {
console.log(this.name + " says hello " + arguments[1]);
}
}
person.hello.apply(person, arguments);
}
personContainer("world", "mars"); // output: "James Smith says hello mars", note: arguments[0] = "world" , arguments[1] = "mars"
它允许设置值, this
独立的功能是如何被调用。 处理回调时这非常有用:
function sayHello(){
alert(this.message);
}
var obj = {
message : "hello"
};
setTimeout(sayHello.bind(obj), 1000);
通过call
获得相同的结果如下所示:
function sayHello(){
alert(this.message);
}
var obj = {
message : "hello"
};
setTimeout(function(){sayHello.call(obj)}, 1000);
链接地址: http://www.djcxy.com/p/2873.html