在前面我简单的讲过JavaScript中this指向的问题,在这一章,主要对call
、apply
和bind
这三个方法进行区分。
首先,call
、apply
、bind
都是用来重定义this指向的。
注意:这里的bind方法是Javascript方法,而不是jQuery方法。在JQ的bind
与今天讲的这个方法相差甚大,详细请看JQ相关文档。
下面先看两个小例子:
var name = 'cy',age= 17;
var obj ={
name:'ally',
objAge:this.age,
myFun:function(){
console.log( this.name + "年龄" + this.age) ;
}
}
console.log(obj.objAge); // 17
obj.myFun() ; // ally年龄undefined
第一个console
中this
指向Windows
。
第二个console
中this
指向了执行函数obj.myFun()
,this
指向obj(方法调用中谁调用this指向谁)
,所以结果显而易见。
var name="cy";
function show(){
console.log(this.name)
}
show() ; //cy
全局状态下的普通函数,this
指向Windows
。
上面的一通造作,让我们感到十分不友好,JavaScrip
t也感到这样的操作十分不便捷,所以就有了call
、apply
、bind
方让,可以随心所欲的改变this
的指向。下面就让我们看看这几个方法具体的区别是什么吧
call、apply、bind应发用法上的区别
还是通过几个个小例子来开始我们的探索
例一
var name ='小王' ,age=17;
var obj={
name:'小张',
objnAge:this.age,
myFun:function(){
console.log(this.name +"年龄" + this.age);
}
}
var db={
name:'dream',
age:99
}
obj.myFun.call(db); //dream年龄99
obj.myFun.apply(db); //dream年龄99
obj.myFun.bind(db)(); //dream年龄99
以上结果返回都一致!
只是在bind方法的后面加了个括号。由此得出结论,bind 返回的是一个新的函数,你必须调用它才会被执行。
例二 :对比call 、bind 、 apply 传参情况下
var name ='小王' ,age=17;
var obj={
name:'小张',
objnAge:this.age,
myFun:function(fm,t){
console.log(this.name +"年龄" + this.age +"来自" +fm + "去往" + t);
}
}
var db={
name:'dream',
age:99
}
obj.myFun.call(db,'成都','上海'); //dream 年龄 99 来自 成都去往上海
obj.myFun.apply(db,['成都','上海']); //dream 年龄 99 来自 成都去往上海
obj.myFun.bind(db,'成都','上海')(); //dream 年龄 99 来自 成都去往上海
obj.myFun.bind(db,['成都','上海'])(); //dream 年龄 99 来自 成都,上海去往undefined
微妙的差距!
从上面四个结果不难看出
call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象,第二个参数差别就来了:
call的参数是直接放进去的,第二第三第n个参数全都用逗号分隔,直接放到后面 obj.myFun.call(db,'成都', ... ,'string' );
apply的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,['成都', ..., 'string' ]);
bind除了返回是函数以外,它 的参数和call 一样。
当然,三者的参数不限定是string类型,允许是各种类型,包括函数 、 object 等等!