1、用途
1)apply,call和bind都是 用来改变this的指向
2)apply和call会让当前函数立即执行,而bind会返回一个函数,后续需要的时候再调用执行
2、this指向问题
this的指向有以下四种情况:
1)如果函数中的this没有调用对象,则this指向window(严格模式下,this为undefined)
2)如果函数中this被不包含子对象的对象调用,则this指向调用它的对象
3)如果函数中this被包含多级对象的对象调用,则this指向调用它的上一级对象
4)如果我们调用了对象,并将其赋值给某个变量,然后在需要的时候再去调用执行它,则此时this也是指向的window对象,如:
var a = obj.myFunc;
a();
var name="zhang";
var age=18;
var obj={
name:"liu",
myAge:this.age,
myFun:function(){
console.log(this); // this指向obj
console.log(this.name+";"+this.age)
}
}
obj.myAge // 18
obj.myFun()
上图是我们很常用的一个对象属性的获取和方法的调用,在我们获取obj.myAge属性时,这里的this实际是window对象,所以我们去找window.age,找到的是全局参数age=18
在调用myFun()方法时,本着谁调用this就指向谁的基本原则,此时this指向的是obj对象,所以我们输出的this.name为liu,this.age为undefined
上面的例子如果不太好理解的话,我们看下面这个更直观的例子:
var name="zhangsan";
function showName(){
console.log(this);
console.log(this.name);
}
show();
我们在这里直接定义了一个方法,并且调用了它,上面说了,谁调用函数,函数里面的this就指向谁,但是我们这里直接调用了show(),并没有明确说明是谁调用了它啊,其实这里我们可以理解为window.show(),即this实际上是指向的window。
3、apply和call
1)先来看看call是如何实现的:
Function.prototype.call=function(context){
context=context?Object(context):window;
context.fn=this;
var args=[];
for(var i=1;i<arguments.length;i++){
args.push("arguments["+i+"]");
}
var r = eval("context.fn("+args+")")
delete context.fn;
return r;
}
var name="test"
function demo(){
console.log(this)
console.lot(this.name)
}
demo.call();
1) 当我们传递了context时,context为我们传递的对象;否则为window对象。
2) 谁调用,this指向谁,我们通过demo.call 调用了call方法,所以这里的this指向的时demo函数
3)将传递的参数放进args中
4)通过eval函数执行我们的context.fn,即上面的demo函数
5)demo函数中,this指向的时call方法中的context,这里时window对象
6)this.name即window.name
2)call其实是apply的一个语法糖,他们的作用都是用于改变上下文的指向,区别在于,call接受多个参数,而apply接受的是一个数组
var db={
name:"dema"
}
var obj={ name:"obj", myFunc:function(from,to){ console.log(this); console.log(this.name+"来自:"+from,+"去往:"+to); } }
obj.myFunc.call(null,'北京','上海') // this 指向window,this.name=undefined,from=北京,to=上海
obj.myFunc.call(db,'北京','上海'); // this指向db,this.name='dema',from=北京,to=上海
obj.myFunc.apply(db,['北京','上海']); // this指向db,this.name='dema',from=北京,to=上海
上面例子中,我们分别调用了call和apply,并传入了参数null,db和地名,从上面的call的实现中,可以看到,我们接受的第一个参数是上下文context,用于改变this的指向。
所以上面第一行,传入的context为null,则this指向window,第二行和第三行,都传人了context为db,所以this此时是指向db的,即this.name=db.name
4、bind
bind也是用于改变上下文的指向,它和call一样,接受多个参数。
bind和apply,call的区别在于,bind返回一个方法,用于后面调用,apply和call会直接执行
function print(a,b,c){ console.log(a,b,c) } var fn = print.bind(null,'D') fn('A','B','C') // D,A,B