JavaScript中apply与call方法的原理及使用详解

理解函数作为对象与this的指向

首先回顾基础概念：在JavaScript中，函数也是对象。因此，每个函数都继承了toString()、call()和apply()等内置方法。虽然我们在日常使用中常区分“函数”和“方法”，但这更多是约定俗成的叫法——方法本质上是附着在对象上的函数。

this关键字的值取决于函数被调用的方式。在全局作用域直接调用函数时，this指向全局对象（浏览器中为window）。例如：

var x = 10;
function f(){
    alert(this.x);
}
f(); // 输出 10，因为 this 指向全局对象

如果我们将函数赋值给对象的属性并通过该对象调用，this则会指向该对象。但有时我们希望在特定上下文中强行执行某个函数，这就需要用到call或apply。

使用 call 改变 this 指向

call方法接收一个对象作为第一个参数，将该对象绑定到当前函数的this上，其余参数依次传入函数。请看以下示例：

var x = 10;
var o = { x : 15};

function f(){
    alert(this.x);
}

f();        // 弹出 10 (this 是全局对象)
f.call(o);  // 弹出 15 (this 变为 o)

上述代码中，f.call(o)明确告诉JavaScript运行时：在调用 f 时，让 f内部的 this 指向对象 o。这对于模拟面向对象编程中的继承或借用其他对象的方法非常有用。

apply 与 call 的参数差异

apply的功能与call几乎相同，主要区别在于参数的传递方式：apply要求将传入目标函数的所有参数放在一个数组中，作为第二个参数传递。其语法为：func.apply(thisArg, [argsArray])。

var x = 10;
var o = {x : 15};

function f(message) {
    alert(message);
    alert(this.x);
}

// 直接调用
f('invoking f'); 

// 通过 apply 调用，第二个参数是包含参数的数组
f.apply(o, ['invoking f through apply']);

这种特性使得apply在处理不确定数量参数或需要将数组元素作为独立参数传入时极具优势。

高级应用：结合 arguments 动态传参

在JavaScript中，任何函数都可以接收任意数量的参数，未定义的多余参数会被忽略，缺失的参数则为undefined。内部保留字arguments提供了一个类数组对象，存储了所有传入的参数。

function f(message) {
    var result = message;
    for(var i = 1; i < arguments.length; i++){
        result += arguments[i];
    }
    alert(result);
}
f('H', 'e', 'l', 'l', 'o'); // 输出