我已经知道并且是设置(函数上下文)的类似函数。apply
call
this
区别在于我们发送参数的方式(手动与数组)
问题:
但是我什么时候应该使用这种方法?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
当您希望以后使用特定上下文调用该函数时使用,这在事件中很有用。当您想要立即调用函数时,请使用 or 并修改上下文。.bind()
.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 上看到真正的实现。
它们都将其附加到函数(或对象)中,区别在于函数调用(见下文)。
call 将其附加到函数中并立即执行函数:
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 类似于 call,只是它采用一个类似数组的对象,而不是一次列出一个参数:
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"
以最简单的形式回答
叫
var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};
function say(greeting) {
console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}
say.call(person1, 'Hello'); // Hello Jon Kuperman
say.call(person2, 'Hello'); // Hello Kelly King
应用
var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};
function say(greeting) {
console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}
say.apply(person1, ['Hello']); // Hello Jon Kuperman
say.apply(person2, ['Hello']); // Hello Kelly King
捆
var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};
function say() {
console.log('Hello ' + this.firstName + ' ' + this.lastName);
}
var sayHelloJon = say.bind(person1);
var sayHelloKelly = say.bind(person2);
sayHelloJon(); // Hello Jon Kuperman
sayHelloKelly(); // Hello Kelly King
调用和申请是可以互换的。只需决定发送数组还是逗号分隔的参数列表更容易。
我总是记住哪个是哪个,记住调用是逗号(分隔列表)和应用是数组。
绑定有点不同。它返回一个新函数。调用和应用立即执行当前函数。
绑定在很多事情上都很棒。我们可以使用它来库里函数,如上例所示。我们可以把一个简单的hello函数变成helloJon或helloKelly。我们也可以将其用于像onClick这样的事件,我们不知道它们何时会被触发,但我们知道我们希望它们具有什么上下文。
参考: codeplanet.io
模板简介:该模板名称为【 Javascript什么使用 call() & apply() vs bind()?】,大小是暂无信息,文档格式为.编程语言,推荐使用Sublime/Dreamweaver/HBuilder打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【JavaScript】栏目查找您需要的精美模板。