功能
- 相同点:都是为了改变某个函数运行时的上下文环境,即改变函数内部的this指向。
- 不同点:接受参数的方式不一样。
看下面的例子:
var a = 1;
var obj = {a:2}
function foo()
{
console.log(this.a);
}
foo(); //1
foo.call(obj); //2
foo.apply(obj); //2
他们的功能是一样的,将foo()里面的this绑定到了obj这个对象上,原本输出window.a变成了输出obj.a,这就是call()和apply的作用。
再看一个例子:
var obj={"name":"john"};
var obj1={"name":"kite"};
function foo(a,b)
{
console.log(this.name+" like "+a+" and "+b);
}
foo.call(obj,"apple","milk"); //john like apple and milk
foo.apply(obj1,["banana","water"]); //kite like banana and water
这就是他们的差别了,他们的第一个参数都是this需要指向的东西,但是后面的参数呢,call把他们一个一个的列在后面,apply则是把他们组成一个数组作为参数,很简单吧。
提示
当我们知道某个函数的参数个数时候,用call;当我们不确定参数个数时,用apply,把参数一个个push到一个数组里面传进去。当然,你也可以使用arguments数组来遍历(不过es6已经不支持arguments了哦,改用三个点吧)。
用途
比如有一个对象cat(),他有一个方法eat(),然后又出现了一个新的对象dog(),他没有这个方法,但是这个dog()对象也希望使用eat()方法。
看下面的例子
var cat={
food:"fish",
eat:function(){ //这个方法是cat有的
console.log("I like "+this.food);
}
}
cat.eat(); //I like fish
var dog={food:"bone"};
cat.eat.call(dog); //I like bone