Javascript call与apply记录

【注】：记录自己对javascript中call与apply的见解

总会有些东西会被人拿出来重复的写来写去，为何？

只是因为自己感觉不够了解，所谓好记性不如烂笔头，并且在写的同时也会或多或少的收获到一些额外的知识，这才是重点（但是必须用心去写）

 

call 概念

【概念】：调用一个对象的一个方法，以另一个对象替换当前对象 或者（劫持另外一个对象的方法，继承另外一个对象的属性）

【函数】：Function.call(obj,[param1[,param2[,…[,paramN]]]])

【参数】：obj：“可选项。这个对象将替代Function类里面的this。”，param1, param2,  , paramN：“可选项。将被传递方法参数序列。”

【说明】：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 obj 指定的新对象。如果没有提供 obj参数，那么 Global 对象被用作 obj

例子

var a = 1, b = 2;       //申明全局变量a，b
var o = { a: 3, b: 4}    //申明对象o

//打印出当前对象
function funCall() {
    console.log(this);
}

funCall();          //直接调用-->this=window
funCall.call();     //调用funCall方法的call方法-->this=window
funCall.call(o);    //以o作为参数调用funCall方法的call方法-->this=o

 

 

apply概念

【概念】：和call的意思一样，只不过是参数列表不一样

【函数】：Function.apply(obj,args)

【参数】：obj：“可选项。这个对象将替代Function类里面的this。”，args：“可选项。这个是数组，它将作为参数传给Function（args-->arguments）”

【说明】：和call的意思一样，只不过是参数列表不一样

例子

var a = 1, b = 2;       //申明全局变量a，b
var o = { a: 3, b: 4}    //申明对象o

//打印出当前对象
function funApply() {
    console.log(this);
}

funApply();         //直接调用-->this=window
funApply.apply();   //调用funApply方法的apply方法-->this=window
funApply.apply(o);  //以o作为参数调用funApply方法的apply方法-->this=o

 

 

call与apply区别，以及什么时候用call、什么时候用apply

【this】首先说下我心中的this：哪个上下文对象调用对应的Function，Funtion中的this就是该上下文对象（Funtion中调用另外一个Funtion，this则会指向window，闭包了~~~~）

通过上述概念的介绍，可以看出call与apply的唯一区别在于参数列表（上述例子中只调用了call与apply的一个参数的重载方法）

var a = 1, b = 2, c = 5;        //申明全局变量a，b
var o = { a: 3, b: 4, e: 6}     //申明对象o

//打印出当前对象
function funCallorApply() {
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(this);
}

 

1，call的多参数调用

call多参数调用还蛮有趣的（至少我是这么理解的），它和jQuery的extend有点相似

funCallorApply.call(o, a, b, c);
//结果：
//
//
//
//Object {a: 3, b: 4, e: 6}

从上述的结果可以知道：call中的第一个参数对象会被替换成触发方法的this，后续都会被当作参数进行传递

 

2，apply的多参数调用

apply则不像call可以代入多个参数，apply只有2个参数，第二个参数需要以数组的形式存在，所以参数是以对象数组的方式进行传递。

funCallorApply.apply(o, [a, b, c]);
//结果
//
//
//
//Object {a: 3, b: 4, e: 6}

从上述结果可以知道：apply和call一样第一个参数对象会被替换被替换成触发方法的this，不通的是参数传递的方式

 

3，什么时候用call，什么时候用apply

其实我一般用的是apply，它可以将参数以对象数组的方式传递（因为我喜欢这种方式传递参数，因为这样可以在方法中设置默认值，然后通过extend继承去重新默认值）。

理论说来要看你方法是怎么构造的了

//方法是这样就可以考虑使用call
function funCallorApply(a, b, c) {
    this.a = a;
    this.b = b;
    this.c = c;
    //具体的实现
}
funCallorApply.call(o, a, b, c);

//方法是这样可以考虑使用apply
function funCallorApply(obj) {
    this.a = obj.a;
    this.b = obj.b;
    this.c = obj.c;
    //具体的实现
}
funCallorApply.apply(o, [a, b, c]);

一般为了方法的扩展，将参数以数组的形式进行传递是个不错的方式。如果需要改参数就不需要去动其它调用的地方了。

 

 

apply的额外补充

在紫云飞的文章中发现了一点apply的额外用处（学浅，只能把第一个运用到实际开发中）

 

细心的人可能已经察觉到，在我调用apply方法的时候，第一个参数是对象(this)，第二个参数是一个数组集合。

在调用funCallorApply.apply(o, [a, b, c])的时候，第二参数是一个数组，但是为什么我仍然可以将数组解析为一个一个的参数？

这个就是apply的一个巧妙的用处，可以将一个数组默认的转换为一个参数列表([param1,param2,param3] 转换为 param1,param2,param3) ，这个如果让我们用程序来实现将数组的每一个项，来装换为参数的列表，可能都得费一会功夫，借助apply的这点特性，所以就有了以下高效率的方法：

 

1，获取数组中的最大值通过Math.max

//JavaScript中没有返回一个数组中最大值的函数.但是,有一个函数Math.max可以返回任意多个数值类型的参数中的最大值.再配合apply,我们可以实现我们的目的
Math.max.apply(null, [3, 8, 10, -1, 5]);    //结果-->10

Math.min最小值也一样应用

 

2，数组合并

//同样push方法没有提供push一个数组,但是它提供了push(param1,param,…paramN) 所以同样也可以通过apply来装换一下这个数组
var arr1 = new Array("1", "2", "3");
var arr2 = new Array("4", "5", "6");
Array.prototype.push.apply(arr1, arr2);

Array.prototype.push.apply会返回合并后数组的length，上面结果是6，合并之后arr1就变成了["1", "2", "3", "4", "5", "6"]

 

3，4，5，6……等待发现

 

特别鸣谢

栀子花开

紫云飞（ [译]Apply和数组:三个技巧）