一文彻底搞懂JavaScrip中的call、apply、arguments

一、引言

在 JavaScript 编程的世界里，call、apply 和 arguments 犹如三把神奇的钥匙，能够解锁许多强大而灵活的功能。它们对于理解函数的行为、优化代码结构以及实现复杂逻辑起着至关重要的作用。无论是新手入门还是资深开发者深入探索，掌握这三者的区别与用法，都能让我们在 JavaScript 的编程之旅中如虎添翼。接下来，就让我们一同深入探究它们的奥秘。

二、call 方法详解

2.1 基本语法与参数说明

call 方法是 Function 对象自带的一个强大方法，它的语法结构如下：

functionName.call(thisArg, arg1, arg2,...);

其中，functionName是要调用的函数名，thisArg是指定的this值，即在函数执行时作为函数体内的this指向，而arg1, arg2,…则是函数执行时的参数列表，这些参数将依次传递给被调用的函数。需要注意的是，在非严格模式下，如果thisArg为null或undefined，函数中的this会指向全局对象（在浏览器环境中通常是window对象）；若传递的是原始值（如数字、字符串、布尔值），this会指向该原始值的自动包装对象。例如：

function greet(greeting) {
    return greeting + ', ' + this.name;
}
const person = { name: 'John' };
const result = greet.call(person, 'Hello');
console.log(result); // 输出 "Hello, John"

在上述代码中，greet.call(person, ‘Hello’)将person对象作为greet函数内部的this指向，同时把’Hello’作为参数传递给greet函数，从而得到了预期的问候语。

2.2 改变函数执行上下文示例

在 JavaScript 中，函数的this指向常常让人捉摸不透，而call方法为我们提供了精准控制this指向的能力。考虑以下对象方法调用的例子：

const person1 = {
    firstName: 'Alice',
    lastName: 'Smith',
    fullName: function () {
        return this.firstName + ' ' + this.lastName;
    }
};
const person2 = {
    firstName: 'Bob',
    lastName: 'Johnson'
};
// 使用call改变this指向，让person2借用person1的fullName方法
const fullName = person1.fullName.call(person2); 
console.log(fullName); // 输出 "Bob Johnson"

在这里，person1.fullName原本的this指向是person1，但通过call(person2)，我们强行将this指向改变为person2，使得fullName方法能够基于person2的属性生成正确的全名，这种灵活改变执行上下文的特性，极大地增强了代码的复用性与适应性。

2.3 实现继承的应用场景

call方法在实现继承方面有着独特的优势，它允许一个构造函数在另一个构造函数的作用域中运行，从而复用代码。假设有如下父类和子类的构造函数：

function Animal(name) {
    this.name = name;
    this.type = 'Animal';
}
function Dog(name, breed) {
    Animal.call(this, name); // 在Dog构造函数中调用Animal构造函数，设置this值为Dog实例
    this.breed = breed;
    this.type = 'Dog';
}
const myDog = new Dog('Buddy', 'Labrador');
console.log(myDog.name); // 输出 "Buddy"
console.log(myDog.breed); // 输出 "Labrador"
console.log(myDog.type); // 输出 "Dog"

在上述代码中，Animal.call(this, name)的调用至关重要。它使得Animal构造函数内部的代码在Dog构造函数的执行上下文中运行，也就是将Animal的属性和初始化逻辑应用到了Dog实例上，实现了属性的继承。相比于传统的在子类中重复编写父类属性初始化代码，这种方式更加简洁高效，且在复杂的继承体系中，能清晰地维护代码结构，避免代码冗余。

三、apply 方法剖析

3.1 语法结构与特点

apply 方法同样是 Function 对象的原生方法，其语法结构如下：

functionName.apply(thisArg, [argsArray]);

与 call 方法相比，apply 的第一个参数thisArg作用相同，都是指定函数执行时的this指向。而关键的区别在于第二个参数，apply 要求传入一个数组（或类数组对象）argsArray，数组中的元素将作为函数的参数依次传递。若argsArray不是有效的数组或类数组对象，将会抛出TypeError异常。当不提供thisArg参数时，在非严格模式下，this会指向全局对象；若argsArray未提供，则表示没有参数传递给函数。例如：

function multiply(a, b) {
    return this.value * a * b;
}
const obj = { value: 2 };
const result = multiply.apply(obj, [3, 4]);
console.log(result); // 输出 24，即 2 * 3 * 4

这里，multiply.apply(obj, [3, 4])将obj作为this指向，[3, 4]作为参数数组传递给multiply函数，实现了特定的乘法运算。

3.2 劫持对象方法与属性继承实例

apply 方法的一个强大之处在于它能够劫持其他对象的方法，并继承其属性。假设我们有一个通用的Person对象，包含一些基本属性和方法，而现在想要让Student对象复用这些功能：

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function () {
        return `Hello, I'm ${this.name}, ${this.age} years old.`;
    };
}
function Student(name, age, grade) {
    Person.apply(this, [name, age]); // 劫持Person的构造函数，继承属性
    this.grade = grade;
}
const student = new Student('Tom', 18, 'Freshman');
console.log(student.sayHello()); // 输出 "Hello, I'm Tom, 18 years old."

在上述代码中，Person.apply(this, [name, age])使得Student对象在创建时，能够获取Person对象中的属性和方法，仿佛Student“继承” 了Person的部分功能。相比于 call 在实现类似继承场景时，需要逐个传递参数，apply 利用参数数组的形式，在参数较多且需要动态生成参数列表的情况下，代码更加简洁、易维护，尤其适用于参数来源是数组或需要批量处理的场景。

3.3 利用参数数组化提升性能案例

在 JavaScript 的内置函数使用中，apply 常常能发挥优化性能的作用。以Math.max函数为例，它本身不接受数组作为参数，但我们又常常需要找出数组中的最大值：

const numbers = [12, 5, 18, 3, 9];
const maxNumber = Math.max.apply(null, numbers);
console.log(maxNumber); // 输出 18

这里，通过apply将数组numbers“打散” 成单个参数传递给Math.max，避免了使用循环手动比较大小的繁琐过程，极大地简化了代码逻辑，提升了执行效率。同样，对于Array.prototype.push方法，当我们想要合并两个数组时：

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
Array.prototype.push.apply(array1, array2);
console.log(array1); // 输出 [1, 2, 3, 4, 5, 6]

如果直接使用array1.push(array2)，会将array2作为一个整体元素添加到array1末尾，得到[1, 2, 3, [4, 5, 6]]，不符合预期。而apply巧妙地将array2的元素逐个添加到array1中，实现了高效的数组合并，这种参数数组化的特性让代码在处理类似批量操作时更加得心应手，优化了性能表现。

四、arguments 对象揭秘

4.1 是什么：类数组特性解读

arguments 是 JavaScript 函数内部自带的一个特殊对象，它呈现出类数组的特性。从结构上看，它拥有按索引存储的数据，就像数组一样可以通过arguments[0]、arguments[1]等来访问各个参数，并且具有length属性用于表示参数的数量。然而，它又并非真正意义上的数组，其原型链指向Object.prototype，而非Array.prototype，这就导致它无法直接使用数组特有的方法，如push、pop、map、forEach等。例如：

function testArgs() {
    console.log(arguments.length); // 输出实际传入参数的个数
    console.log(typeof arguments); // 输出 'object'，表明它是一个对象
    try {
        arguments.push(10); // 尝试调用数组的push方法，会抛出异常
    } catch (error) {
        console.log('Error:', error.message); // 捕获并打印错误信息，提示push不是函数
    }
}
testArgs(1, 2, 3); 

在上述代码中，我们清晰地看到 arguments 既具备类似数组访问元素和获取长度的方式，又在方法使用上与真正数组存在差异，这种独特的类数组结构为函数处理参数提供了别样的灵活性。

4.2 怎么用：常见操作与应用场景

4.2.1 动态参数处理

当函数需要接收不定数量的参数时，arguments 就发挥出了强大的作用。比如，我们要编写一个函数来实现对所有传入数字参数的累加：

function sumAll() {
    let total = 0;
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}
console.log(sumAll(1, 2, 3)); // 输出 6
console.log(sumAll(5, 10, 15, 20)); // 输出 50

在这个例子中，无论传入多少个参数，sumAll函数都能通过遍历 arguments 对象，动态地将所有参数值相加，完美适应不同数量参数的传入，极大地增强了函数的通用性与灵活性。

4.2.2 与函数参数的关联

在非严格模式下，函数的形参和 arguments 对象之间存在着一种 “联动” 关系。当形参被修改时，arguments 中对应的元素也会同步改变，反之亦然。例如：

function updateArgs(a, b) {
    console.log('形参初始值：', a, b);
    console.log('arguments初始值：', arguments[0], arguments[1]);
    a = 10;
    arguments[1] = 20;
    console.log('形参修改后：', a, b);
    console.log('arguments修改后：', arguments[0], arguments[1]);
}
updateArgs(5, 15); 

输出结果会显示，形参a和arguments[0]、形参b和arguments[1]始终保持一致的变化。然而，在严格模式下（使用’use strict’;声明），这种联动被切断，对形参或 arguments 的修改将互不影响，这一点在编写严谨的代码时需要特别注意，避免因模式差异导致的潜在错误。

4.2.3 模拟函数重载

JavaScript 本身并不支持像 Java、C++ 等语言那样的函数重载（即同名函数根据不同参数列表执行不同逻辑），但借助 arguments 对象，我们可以巧妙地模拟这一功能。例如，创建一个加法函数，根据传入参数个数的不同执行不同的加法运算：

function add() {
    if (arguments.length === 1) {
        return arguments[0] + 5;
    } else if (arguments.length === 2) {
        return arguments[0] + arguments[1];
    }
}
console.log(add(10)); // 输出 15
console.log(add(4, 6)); // 输出 10

这里，add函数通过判断 arguments 的长度，灵活地实现了单参数加 5 或双参数相加的不同逻辑，模拟出了函数重载的效果，让代码在面对多样化的参数输入时能够做出智能响应，提升了代码的复用性与功能性。

五、call、apply、arguments 对比总结

5.1 功能异同梳理

call 和 apply 方法在本质上都服务于改变函数执行时的this指向，让函数能够在指定的对象上下文中运行，实现代码复用与功能扩展。二者的核心区别就在于参数传递方式，call 采用逐个罗列参数的形式，适用于参数数量少且明确的场景，能清晰展现参数与函数逻辑的对应关系；而 apply 借助数组来传递参数，当面对动态生成参数列表、参数数量众多或需直接复用函数内部 arguments 对象时，它能让代码更加简洁、紧凑，避免冗长的参数罗列。arguments 对象则专注于函数参数的灵活处理，其独特的类数组结构，允许函数在不预先知晓参数个数的情况下，便捷地访问、操作所有传入参数，还能通过巧妙运用模拟函数重载等高级特性，极大增强函数的通用性与适应性，解决 JavaScript 原生不支持函数重载的局限。尽管三者功能各有侧重，但共同为 JavaScript 函数操作提供了丰富的工具集，助力开发者编写高效、灵活的代码。

5.2 适用场景抉择

在实际编程场景中，我们需依据具体需求合理选用这三个工具。当进行对象方法的借用与继承，如子类构造函数复用父类初始化逻辑时，call 方法凭借直观的参数传递，能清晰地将父类所需参数按序传入，保障继承关系的准确建立，代码可读性强；若遇到参数源于数组或需批量处理的情况，像利用Math.max求数组最大值，apply 以参数数组化的方式，无缝对接此类需求，简化代码并提升性能。对于函数内部不定参数的处理、动态参数运算以及模拟重载等任务，arguments 则是不二之选，它为函数提供了强大的自适应能力，满足多样化的输入要求。总之，深入理解它们各自的优势，结合实际编码场景精准运用，方能充分释放 JavaScript 函数的潜能，让代码质量与开发效率实现质的飞跃。

六、结语

通过对 call、apply 和 arguments 的深入探索，我们揭开了它们神秘的面纱，看到了它们在 JavaScript 编程中无可替代的关键作用。call 和 apply 助力我们灵活操控函数的执行上下文，实现代码复用与继承，极大地优化了面向对象编程的体验；arguments 则赋予函数处理动态参数的强大能力，突破传统参数传递的局限，让函数变得更加智能、通用。掌握这些特性，无疑能让我们编写的 JavaScript 代码更加简洁、高效、富有表现力。希望大家在今后的编程实践中多多运用，不断加深理解。后续我还将分享更多精彩的前端技术知识，敬请期待，让我们一起在前端的道路上砥砺前行，创造更出色的作品。

到此这篇关于JavaScrip中的call、apply、arguments的文章就介绍到这了,更多相关js中call、apply、arguments内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源链接：https://www.jb51.net/javascript/338863srf.htm