这几天重新翻了遍 js秘密花园。 讲到之前忽略的call和apply方法，觉得有必要整理一下。

w3cschool的例子解释：

call()方法的第一个参数用作this的对象，其他参数都直接传递给函数本身。

1
2
3
4
5
6
7
8
9
10
11
function sayColor(sPrefix,sSuffix) {

    alert(sPrefix + this.color + sSuffix);

};

var obj = new Object();

obj.color = "blue";

sayColor.call(obj, "The color is ", "a very nice color indeed.");
  • 对象obj的color属性等于blue；
  • 调用call()方法时，第一个参数是obj，即赋予sayColor()函数的this关键字值是obj.
  • 第二个和第三个参数是字符串，与sayColor()函数中的参数sPrefix和sSuffix匹配；

apply()方法有两个参数，用作this的对象和要传递给函数的参数的数组

1
2
3
4
5
6
7
8
9
10
11
function sayColor(sPrefix,sSuffix) {

    alert(sPrefix + this.color + sSuffix);

};

var obj = new Object();

obj.color = "blue";

sayColor.apply(obj, new Array("The color is ", "a very nice color indeed."));
  • 调用apply()方法时，第一个参数仍是obj，即sayColor()函数中的this值是obj；
  • 第二个参数则与sayColor()对应参数相匹配；

结合这两个例子，其实就可以明白call与apply就是为了改变对象的this。它们的第一个参数都是要传入给当前对象的对象（this），后面的参数都是传递给当前对象的参数。比如方法里写了this，普通调用这个方法这个this的可能是window，而如果用call，第一个参数写啥，this就是啥。

再举一个例子更浅显地说明它们的作用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function People(){}

   People.prototype={

   age:"22",

   card:function(){

     console.log("I am "+this.age);

   }

} 

var xiaoming = new People();

xiaoming.card();

现在我们有另外一个人xiaohong={age:”20”}。可以直接用call或apply：

xiaoming.card.call(xiaohong)

这样我就不需要重新定义xiaohong了。

那么call和apply有什么区别呢，其实只在于两个函数接受的参数形式不同。

Function.apply(obj,args)方法能接受两个参数：obj这个对象将代替Function类的this对象；args讲作为参数传递给Function。

Function.call(obj,[arg1,arg2..])：obj这个对象将代替Function类的this对象；[arg1,arg2..]：这个是一个参数列表。

总而言之，即是apply传入的是一个参数数组，即将多个参数组合成为一个数组传入，而call则作为call的参数传入。func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])