【js篇】call() 与 apply()深度对比

在 JavaScript 中，call() 和 apply() 是两个功能极其相似的方法，它们都能显式绑定函数执行时的 this 指向，并调用函数。你提到的"作用一样，区别仅在参数形式"是完全正确的，但我们可以更深入地理解它们的使用场景和细微差异。

本文将全面解析 call 与 apply 的异同、使用技巧和最佳实践。

---

一、核心定义回顾

方法	语法	说明
call()	func.call(thisArg, arg1, arg2, ...)	第一个参数指定 this，其余参数逐个传入
apply()	func.apply(thisArg, [argsArray])	第一个参数指定 this，第二个参数是数组或类数组

✅ 共同点：

• 立即执行函数；
• 改变 this 指向；
• 参数都会传递给目标函数。

---

二、参数传递方式的对比

✅ 示例：一个简单的加法函数

function add(a, b, c) {
  console.log(`${this.name}: ${a + b + c}`);
}

const context = { name: 'Calculator' };

使用 call()：

add.call(context, 1, 2, 3);
// 输出: Calculator: 6
// 参数逐个列出

使用 apply()：

add.apply(context, [1, 2, 3]);
// 输出: Calculator: 6
// 参数以数组形式传入

---

三、何时使用 call？何时使用 apply？

✅ 推荐使用 call() 的场景：

• 参数数量固定且已知；
• 参数是独立变量，不需要数组结构。

// 例如：格式化日期
function formatDate(prefix, year, month, day) {
  return `${prefix}: ${year}-${month}-${day}`;
}

const user = { name: 'Alice' };
const result = formatDate.call(user, 'Birthday', 1990, 5, 15);
// "Birthday: 1990-5-15"

✅ 代码更清晰，参数一目了然。

---

✅ 推荐使用 apply() 的场景：

• 参数以数组形式存在；
• 参数数量不确定（可变参数）；
• 需要"展开"数组作为参数。

场景1：求数组最大值

const numbers = [1, 5, 3, 9, 2];
const max = Math.max.apply(null, numbers);
// 等价于 Math.max(1, 5, 3, 9, 2)
console.log(max); // 9

❌ 无法使用 call 直接传数组，必须：

Math.max.call(null, 1, 5, 3, 9, 2); // 需手动展开

场景2：处理类数组对象（如 arguments）

function logArgs() {
  // arguments 是类数组，不能直接用 forEach
  console.log('Arguments:');
  Array.prototype.forEach.apply(arguments, [function(arg, i) {
    console.log(`[${i}]: ${arg}`);
  }]);
}

logArgs('a', 'b', 'c');
// Arguments:
// [0]: a
// [1]: b
// [2]: c

---

四、现代 JavaScript 的替代方案：扩展运算符（Spread Operator）

ES6 引入的扩展运算符 ... 让 apply 的使用场景大大减少。

✅ 使用 ... 替代 apply

const numbers = [1, 5, 3, 9, 2];

// 旧方式
Math.max.apply(null, numbers);

// 新方式（推荐）
Math.max(...numbers); // 更简洁！

✅ 使用 ...args 替代 apply 处理 arguments

function sumAll(...args) {
  return args.reduce((sum, num) => sum + num, 0);
}

// 而不是
function sumAll() {
  return Array.prototype.reduce.apply(arguments, [function(sum, num) {
    return sum + num;
  }, 0]);
}

---

五、性能对比（现代引擎已优化）

在早期 JavaScript 引擎中，call 通常比 apply 稍快，因为 apply 需要处理数组解析。

但在现代 V8 引擎（Chrome、Node.js）中，两者的性能差异几乎可以忽略不计 。选择哪个方法应基于代码可读性和参数结构，而非性能。

---

六、常见错误与注意事项

❌ 错误1：apply 的第二个参数不是数组

add.apply(context, 1, 2, 3); // ❌ 报错！第二个参数应为数组

❌ 错误2：call 传入数组未展开

add.call(context, [1, 2, 3]); // ❌ 相当于 add([1,2,3], undefined, undefined)

✅ 正确做法：

// 使用 apply
add.apply(context, [1, 2, 3]);

// 或使用 call + 展开
add.call(context, ...[1, 2, 3]);

---

七、总结：call vs apply 一览表

特性	call()	apply()
this 绑定	✅ 支持	✅ 支持
立即执行	✅ 是	✅ 是
参数形式	逐个传参	数组/类数组
适用场景	参数固定、独立变量	参数为数组、类数组、可变参数
现代替代	无直接替代	... 扩展运算符
性能	略优（已不明显）	略低（已不明显）

---

💡 结语

"call 和 apply 是一对孪生兄弟，选择谁取决于你手里的'食材'。"

• 如果你有独立的参数 ，用 call；
• 如果你有一个数组 ，用 apply 或 ...；
• 在现代开发中，优先使用扩展运算符 ... 来替代 apply 的常见用法。

📌 记住：

• call(thisArg, a, b, c)
• apply(thisArg, [a, b, c])
• modern(thisArg, ...[a, b, c])

掌握它们的区别，能让你写出更优雅、更高效的代码！