昨天看了一遍javascript的面向对象，感觉javascript的面向对象比java难懂很多啊，主要还是原型链继承这块的东西。
本篇内容主要讲在学习javascript中很容易搞不清楚的call()方法和apply()方法。

apply和call的区别在哪里

apply:方法能劫持另外一个对象的方法，继承另外一个对象的属性.
Function.apply(obj,args)方法能接收两个参数
obj：这个对象将代替Function类里this对象
args：这个是数组，它将作为参数传给Function（args–>arguments）
call:和apply的意思一样,只不过是参数列表不一样.
Function.call(obj,[param1[,param2[,…[,paramN]]]])
obj：这个对象将代替Function类里this对象
params：这个是一个参数列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/*定义一个人类*/  
function Person(name,age)  
    {  
        this.name=name;  
        this.age=age;  
    }  
/*定义一个学生类*/  
functionStudent(name,age,grade)  
    {  
        Person.apply(this,arguments);  
        this.grade=grade;  
    }  
//创建一个学生类  
var student=new Student("zhangsan",21,"一年级");  
//测试  
alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);

大家可以看到测试结果name:zhangsan age:21 grade:一年级
学生类里面我没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的神奇之处.
分析: Person.apply(this,arguments);
this:在创建对象在这个时候代表的是student
arguments:是一个数组,也就是[“zhangsan”,”21”,”一年级”];
也就是通俗一点讲就是:用student去执行Person这个类里面的内容,在Person这个类里面存在this.name等之类的语句,这样就将属性创建到了student对象里面。

什么情况下用apply,什么情况下用call

在给对象参数的情况下,如果参数的形式是数组的时候,比如apply示例里面传递了参数arguments,这个参数是数组类型,并且在调用Person的时候参数的列表是对应一致的(也就是Person和Student的参数列表前两位是一致的) 就可以采用 apply , 如果我的Person的参数列表是这样的(age,name),而Student的参数列表是(name,age,grade),这样就可以用call来实现了,也就是直接指定参数列表对应值的位置(Person.call(this,age,name,grade));

Function.apply()在提升程序性能方面的技巧

我们先从 Math.max() 函数说起， Math.max后面可以接任意个参数，最后返回所有参数中的最大值。

1
2

alert(Math.max(5,8))   //8
alert(Math.max(5,7,9,3,1,6))   //9

但是在很多情况下，我们需要找出数组中最大的元素。

1
2

var arr=[5,7,9,1]
alert(Math.max(arr))

这样却是不行的。一定要这样写

1
2
3
4
5
6
7

function getMax(arr){
    var arrLen=arr.length;
    for(var i=0,ret=arr[0];i<arrLen;i++){
        ret=Math.max(ret,arr[i]);        
    }
    return ret;
}

这样写麻烦而且低效。如果用 apply呢，看代码：

1
2
3

function getMax2(arr){
    return Math.max.apply(null,arr)
}

两段代码达到了同样的目的，但是getMax2却优雅，高效，简洁得多。

看性能测试:
getMax性能测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<script>
var myArr=new Array()

function fillRnd(arrLen){  //填入 arrLen个1-10的随机数字到数组
    for(var i=0,arr=[];i<arrLen;i++){
        arr[i]=Math.ceil(Math.random()*10)
    }
    return arr
}

function getMax(arr){
    var arrLen=arr.length;
    for(var i=0,ret=arr[0];i<arrLen;i++){
        ret=Math.max(ret,arr[i]);        
    }
    return ret;
}

function getMax2(arr){
    return Math.max.apply(null,arr)
}


myArr=fillRnd(20*10000)  //生成20万个随机数填到数组

var t1=new Date()
var max1=getMax(myArr)
var t2=new Date()
var max2=getMax2(myArr)
var t3=new Date()

if (max1!==max2) alert("error")
alert([t3-t2,t2-t1])   //在我机器上 96,464 .不同的机器,结果可能有差异

</script>

通过20万个数据的比较， getMax2 时间为 96ms 而 getmax时间为464。 两者相差5倍

再比如数组的push方法。
var arr1=[1,3,4];
var arr2=[3,4,5];
如果我们要把 arr2展开，然后一个一个追加到 arr1中去，最后让 arr1=[1,3,4,3,4,5]
arr1.push(arr2) 显然是不行的。 因为这样做会得到 [1,3,4, [3,4,5] ]

我们只能用一个循环去一个一个的push当然也可以用 arr1.concat(arr2) 但是concat方法并不改变 arr1本身
自从有了 Apply ,事情就变得如此简单

1

Array.prototype.push.apply(arr1,arr2)