javascript中的call()和apply()的理解

Posted 2020-07-07

      在学习javascript的时候，对于call()和apply()的用法总是难以理解，相信很多小伙伴和我又一样的想法。最近在看犀牛书，对这两个函数又狠狠地理解了一下，总算有些眉目，了解了两个函数的基本用法，现在和小伙伴们分享一下，说的不对还望纠正。

一、call

    语法：call([thisObj[,arg1[, arg2[,   [,.argN]]]]])
    定义：调用一个对象的一个方法，以另一个对象替换当前对象。

看完语法和定义还是难以理解，call函数可以接受若干个参数，其中第一个参数为当前操作的对象，后面几个参数为调用的方法的参数，这么说还是难以理解，直接上代码：

 1 function Teacher(name, age) {  //定义一个构造函数Teacher
 2     this.name = name;
 3     this.age = age;
 4     this.intro = function() {
 5         alert("My name is " + this.name + "," + "I‘m " + this.age)
 6     }
 7 }
 8 
 9 function Student(name, age) {  //定义一个构造函数Student
10     Teacher.call(this, name, age);  //Student调用了Teacher的方法
11 }
12 var studentA = new Student("Lily", 19); //实例化一个studentA,传入参数
13 studentA.intro(); //调用studentA的intro方法 输出：My name is Lily,I‘m 19

上例中，studentA是通过构造函数Student实例化的，本应该继承Student构造函数的所有可继承方法，但我们看到Student函数并没有任何方法，但是Student调用了，可以说是继承了Teacher的方法，故studentA也就有了intro()方法。其中代码第十行起到了关键作用Teacher.call(this, name, age)，此句的作用是令当前对象调用另一个对象的方法，this关键字在这里指代Student()对象，实例化以后this指代studentA对象，而后面的参数分别为Teacher传入的参数。可能上面的例子不是很常见，但是我们经常见到这样的代码：

 

1 var str="你好美女";
2 Array.prototype.join.call(str,"!");    //你!好!美!女

 

join方法是数组特有的方法，它是定义在Array()构造函数的原型中的方法，所以我们实例化的数组就都继承了这个方法，但是字符串str是没有join方法，但此处我们就借用了数组的join方法来处理字符串。在call左边的表达式为借用的对象的方法，call()中的第一个参数对象借用call左边表达式对象的方法（不知道这样说能不能理解，将就吧）。

二、apply

     apply()方法的作用和call方法是一样的，只是传入的参数不同。

     语法：apply([thisObj[,argArray]])
     定义：应用某一对象的一个方法，用另一个对象替换当前对象。

apply的第一个参数和call一样，第二个参数是一个数组对象（类数组也可以），他不再是以单个参数列表的形式传入参数，而是把所有参数都放到一个数组中，一起传入。这里就不得不说到arguments对象，它存在于每个函数中，是函数所有实参组成的一个类数组对象。所以apply的第二个参数传入arguments对象。看下面示例：

 

1 var arr=[2,3,12,5,234,199,21,1000,2432];
2 var max=Math.max.apply(Math,arr);
3 console.log(max); //2432

 

数组中没有求最大值得方法，但是Math对象里面有max可以求出最大值，因此我们使用apply方法让数组继承Math的max()方法，从而求出数组中的最大值，同样上面的方法也可以用call（）方法代替，只不过书写较为麻烦，不便于阅读，代码为：

1 var max=Math.max.call(Math,2,3,12,5,234,199,21,1000,2432);
2 console.log(max); //2432

关于call和apply最基本的用法就是这些，当然这两个函数的妙处远远不止这些，欢迎大神们补充。