前端面试经典题之apply与call的比较
在讲apply和call之前，我们需要先清楚在js中，this指向的是什么。
大家可以参考一下阮一峰老师写的关于JavaScript中this的原理讲解文章：http://www.ruanyifeng.com/blog/2018/06/javascript-this.html
关于apply和call的用途，用一句话来简单概括就是改变一个对象中this的指向，这两个方法的作用都是一样的，唯一不同的是传入参数的不同，下面我们看一下这两个方法的具体用法：
1 /* apply */ 2 function.apply(obj, argsArray); // 传入的参数是以数组形式 3 4 /* call */ 5 function.call(obj, arg1, arg2, ..); // 传入的参数个数是确定的 6 7 8 /* apply和call传参方式的区别 */ 9 function add(c,d){ 10 return this.a + this.b + c + d; 11 } 12 13 var s = {a:1, b:2}; 14 console.log(add.call(s, 3, 4)); // 1+2+3+4 = 10 15 console.log(add.apply(s, [5, 6])); // 1+2+5+6 = 14
其中第一个参数是我们要将this指向的那个新的对象，第二个参数是我们可以传进要调用的方法的参数。我们可以看到，当参数的个数是确定时，我们可以调用call方法来改变this的指向，当参数个数是不确定时，我们可以将这些参数封装进一个数组里面，通过传入数组来调用apply方法改变this的指向。要注意的是，当传入apply方法中的参数不是数组时，系统会自动报错，抛出一个TypeError。
下面先看一下apply和call的用法：
1 window.number = 'one'; 2 document.number = 'two'; 3 4 var s1 = {number: 'three' }; 5 function changeColor(){ 6 console.log(this.number); 7 } 8 9 changeColor.apply(); //one 10 changeColor.apply(window); //one 11 changeColor.apply(document); //two 12 changeColor.apply(this); //one 13 changeColor.apply(s1); //three
1 window.color = 'red'; 2 document.color = 'yellow'; 3 4 var s1 = {color: 'blue' }; 5 6 function changeColor() { 7 console.log(this.color); 8 } 9 10 changeColor.call(); //red 11 changeColor.call(window); //red 12 changeColor.call(document); //yellow 13 changeColor.call(this); //red 14 changeColor.call(s1); //blue
这是我在网上看到的一个例子，我觉得能够帮助我们较快地理解apply和call这个改变指向是怎么改变的。
