先放结论:
方法名 | 实现功能 | 传入参数 |
function.prototype.call() | 调用一个函数 | thisObj,arg1,arg2,arg3 |
function.prototype.apply() | 调用一个函数 | thisObj,[arg1,arg2,arg3] |
function.prototype.bind() | 生成一个新函数 | thisObj,arg1,arg2,arg3 |
call和apply实现的功能是一样的,只是call接收的是一个参数列表,而aplly接受的是一个包含参数的数组(记忆技巧:将apply的首字母a记作array)。
bind方法则与两个方法不同,是生成一个新的函数,等待调用。
例子:
现有一个obj对象,我希望在obj.say('hello')的调用中,返回‘johnsayhello’,但这显然做不到,因为talk内部调用的say()函数的this指向显然不是obj,而是全局的windows,所以并不能获取到this.name的值。现在分别借用call/apply/bind方法来实现一下该功能。
var obj={
name:'john',
talk:function(content){
var say = function(){
console.log(this.name+'say'+content);
}
say();
}
}
obj.talk('hello'); //sayhello
1.使用call()
var obj={
name:'john',
talk:function(content){
var say = function(...args){
console.log(this.name+'say'+content+args.join(','));
}
say.call(this,'jack','lucy');
}
}
obj.talk('hello'); //johnsayhellojack,lucy
2.使用apply
var obj={
name:'john',
talk:function(content){
var say = function(...args){
console.log(this.name+'say'+content+args.join(','));
}
say.apply(this,['jack','lucy']);
}
}
obj.talk('hello'); //johnsayhellojack,lucy
3.使用bind
var obj={
name:'john',
talk:function(content){
var say = function(...args){
console.log(this.name+'say'+content+args.join(','));
}
say.bind(this,'jack','lucy')();//bind生成新的函数,所以需要再次调用
}
}
obj.talk('hello'); //johnsayhellojack,lucy