JavaScript中call与apply方法的用法及区别详解

call和apply方法的基本原理

call和apply方法的第一个参数用于指定函数调用时的上下文对象，即该函数的this值。在函数体内部，可以通过this关键字引用这个上下文对象。

假设希望将函数f作为对象o的方法来调用，可以通过call或apply方法实现，具体语法如下所示。

f.call(o);
f.apply(o);

上述调用方式在逻辑上等价于以下操作步骤：

o.m = f; // 将函数f临时赋值给对象o的属性m
o.m(); // 调用对象o的临时方法m
delete o.m; // 删除对象o的属性m，恢复原状

下面通过一个具体示例来验证这一机制。

function testFun(){
return this.a + this.b;
　　}
var o = {a:1, b:2};
testFun.call(o); // 返回结果为3
testFun.apply(o); // 返回结果为3

上述代码执行结果均为3。其原理等同于直接计算o.a + o.b，即1 + 2。

处理this为null的情况

接下来探讨一个常见场景：当call或apply的第一个参数传入null或undefined时，会发生什么？请看以下示例。

var a = 10, b = 20;
function testFun(){
return this.a + this.b;
　　}
testFun.call();
testFun.apply();

上述代码执行结果均为30。这是因为当call或apply的第一个参数为null或undefined时，JavaScript引擎会将其替换为全局对象（在浏览器环境中为window）。因此，this.a和this.b分别指向全局变量a和b，即10 + 20 = 30。

call与apply的参数传递区别

那么，call和apply方法之间究竟有何区别？

对于call方法，第一个参数之后的所有参数将直接作为待调用函数的实参传入。例如，若要以对象o的方法形式调用函数f，并传递两个参数1和2，可以使用如下代码：

f.call(o, 1, 2);

而apply方法则要求将第一个参数之后的所有实参封装在一个数组中传入。

f.apply(o, [1, 2]);

下面通过一个综合示例来展示这一区别。

function testFun(x, y){
return this.a + this.b + x + y;
　　}
var o = {a:1, b:2};
testFun.call(o, 10, 20);
testFun.apply(o, [10, 20]);

上述代码执行结果均为33。其计算逻辑等同于 return o.a + o.b + 10 + 20，即 1 + 2 + 10 + 20 = 33。