前端面试经典题之apply与call的比较

　　在讲apply和call之前，我们需要先清楚在js中，this指向的是什么。

　　大家可以参考一下阮一峰老师写的关于JavaScript中this的原理讲解文章：http://www.ruanyifeng.com/blog/2018/06/javascript-this.html

　　关于apply和call的用途，用一句话来简单概括就是改变一个对象中this的指向，这两个方法的作用都是一样的，唯一不同的是传入参数的不同，下面我们看一下这两个方法的具体用法：

 /*  apply  */
 function.apply(obj, argsArray);        // 传入的参数是以数组形式
 
 /*  call */
 function.call(obj, arg1, arg2, ..);      // 传入的参数个数是确定的
 
 /* apply和call传参方式的区别 */
 function add(c,d){
     return this.a + this.b + c + d;
 }
 
 var s = {a:1, b:2};
 console.log(add.call(s, 3, 4));       // 1+2+3+4 = 10
 console.log(add.apply(s, [5, 6]));  // 1+2+5+6 = 14

　　其中第一个参数是我们要将this指向的那个新的对象，第二个参数是我们可以传进要调用的方法的参数。我们可以看到，当参数的个数是确定时，我们可以调用call方法来改变this的指向，当参数个数是不确定时，我们可以将这些参数封装进一个数组里面，通过传入数组来调用apply方法改变this的指向。要注意的是，当传入apply方法中的参数不是数组时，系统会自动报错，抛出一个TypeError。

　　下面先看一下apply和call的用法：

 window.number = 'one';
 document.number = 'two';
 
 var s1 = {number: 'three' };
 function changeColor(){
     console.log(this.number);
 }
 
 changeColor.apply();         //one
 changeColor.apply(window);   //one
 changeColor.apply(document); //two
 changeColor.apply(this);     //one
 changeColor.apply(s1);       //three

 window.color = 'red';
 document.color = 'yellow';
 
 var s1 = {color: 'blue' };
 
 function changeColor() {
     console.log(this.color);
 }
 
 changeColor.call();                   //red
 changeColor.call(window);             //red
 changeColor.call(document);           //yellow
 changeColor.call(this);               //red
 changeColor.call(s1);                 //blue

　　这是我在网上看到的一个例子，我觉得能够帮助我们较快地理解apply和call这个改变指向是怎么改变的。