【注】:记录自己对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);
//结果:
//1
//2
//5
//Object {a: 3, b: 4, e: 6}
从上述的结果可以知道:call中的第一个参数对象会被替换成触发方法的this,后续都会被当作参数进行传递
2,apply的多参数调用
apply则不像call可以代入多个参数,apply只有2个参数,第二个参数需要以数组的形式存在,所以参数是以对象数组的方式进行传递。
funCallorApply.apply(o, [a, b, c]);
//结果
//1
//2
//5
//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
//
Script中没有返回一个数组中最大值的函数.但是,有一个函数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"]