一些简单的Javascript操作中较少会用到call和apply函数,在另外一些较大型的操作中,如web应用开发,js框架开发中可能会经常遇到这两个函数。关于这两个函数的解释,网上的资料也很多,但是本人认为很多资料要么照本宣科,要么高度雷同,缺少接地气的解释。接下来我试图用更加清晰简单的思路来分析解释这两个函数。
我们可以将call()和apply()看做是某个对象的方法,通过调用方法的实行来间接调用函数。call()和apply()的第一个实参是要调用函数的母对象,它是调用上下文,在函数体内通过this来获得对它的引用。要想对对象o的方法来调用函数f(), 可以这样使用call()和apply(): f.call(o) f.apply(o).[1]
先来分析一下call,这里有ECMAScript 3rd Edition对call函数的解释[2]:当call方法被一个function对象调用时(func.call(0)),需要传入一个必须的参数和若干个非必须的参数,它的执行过程是这样的:
a, 如果调用call的对象是不可运行的,抛出一个TypeError错误。
b, 设置参数列表为空
c, 如果被调用的方法传入不止一个参数,那么依次把arg1,arg2…插入到参数列表里
d, 返回调用call的函数结果,把调用函数(func)中的this用传入的参数1替换,把传入的参数列表当作这个函数的参数。
实际上,call函数是function对象的原型,也就是说,当调用call的函数必须也是个函数,当调用这个call时,把调用call的函数中的this用传入的对象替换就行了。下面有个例子:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<script>
function C1(){
this .name= '张三' ;
this .age= '24' ;
this .sayname= function (){
console.log( "这里是C1类,我的名字是:" + this .name+ "我的年龄是" + this .age);
}
}
function C2(){
this .name= '李四' ;
this .age= '25' ;
}
var c1= new C1();
var c2= new C2();
c1.sayname();
c1.sayname.call(c2);
</script>
|
执行结果:
这里是C1类,我的名字是:张三我的年龄是24
这里是C1类,我的名字是:李四我的年龄是25
上面的代码中,声明了两个类,C1和C2,C1有两个属性,一个方法,C2也有两个和C1一样的属性,实例化之后,c1.sayname()打印出了实际属性,c1.sayname.call(c2)却打印除了c2的属性,为什么为这样?因为sayname()是个函数,并且函数体内有this,当call执行的之后,this就会被c2代替,所以,最终会打印出c2的属性。
apply和call的区别就在于可选参数的传递,apply的可选参数全部存放在一个数组当中,当成一个参数窜入而call是分成多个参数传入。
那么,apply和call函数有哪些应用呢?第一个是网络上比较经典的求数字数组中的最大元素,直接用Math.max.apply(null,array)即可,另外一个是可以用apply和call实现继承,如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<script>
function Human(name,sex){
this .name=name;
this .sex=sex;
this .walk= function (){
console.log( '我在走路' );
}
}
function Child(){
Human.call( this , "小明" , "男" )
this .paly= function (){
console.log( '我很喜欢玩耍' );
}
this .intruduce= function (){
console.log( '大家好,我是' + this .name);
}
}
var jinp= new Human( 'Jack' , '男' );
var xiaoping= new Child();
xiaoping.walk();
xiaoping.paly();
xiaoping.intruduce();
</script>
|
执行结果:
我在走路
我很喜欢玩耍
大家好,我是小明
与call()和apply()相似的函数是bind(), 它是在ECMAScript 5中新增的方法,但在ECMAScript 3中可以轻易的模拟bind()。bind函数一样也是Javascript中Function.prototype的方法,这个方法的主要内容是将函数绑定至某个对象。当函数f()上绑定bind()方法并传入一个对象o作为参数,这个方法将返回一个新的函数当作o的方法来调用。传入新函数的任何实参都将传入原始函数。如下:
1
2
3
4
5
6
7
8
|
<script>
function introduce(country,hobby){
return "大家好,我叫" + this .name+ ", 今年" + this .age+ "岁, 来自" +country+ ", 喜欢" +hobby;
}
var xiaoming={name: "小明" ,age:20}
var jieshao=introduce.bind(xiaoming);
console.log(jieshao( "中国" , "打球" ));
</script>
|
执行结果:
大家好,我叫小明, 今年20岁, 来自中国, 喜欢打球
上面的例子等效于:
1
2
3
4
5
6
7
8
9
|
<script>
function introduce(country,hobby){
return "大家好,我叫" + this .name+ ", 今年" + this .age+ "岁, 来自" +country+ ", 喜欢" +hobby;
}
var xiaoming={name: "小明" ,age:20}
console.log(introduce.apply(xiaoming,[ "中国" , "打球" ]));
//或者下面这个
console.log(introduce.call(xiaoming, "中国" , "打球" ));
</script>
|
需要注意的是:在ECMAScript 5的严格模式中,call()和apply()的第一个实参都会变成this的值,哪怕传入的实参是原始值甚至是null或者undefined。在ECMAScript 3和非严格模式中,传入的null和undefined都会被全局对戏那个代替,而其他原始值会被相应的包装对象所替代。
参考资料
[1], Javascript权威指南第6版,189页
[2], Function.prototype.call (thisArg [ , arg1 [ , arg2, … ] ] )
[3], Function.prototype.apply (thisArg, argArray)