JavaScript ‘call‘ 与 ‘apply‘：掌控函数执行上下文的魔法钥匙33

您好！作为您的中文知识博主，我很乐意为您撰写一篇关于JavaScript中`call`和`apply`方法的深度解析文章。
---

大家好，我是你们的中文知识博主！在JavaScript的奇妙世界里，我们经常会遇到一个让初学者头疼、却又无处不在的概念——`this`。这个“神秘”的关键词，它的指向总是变幻莫测，让人捉摸不透。然而，正是这种灵活性，赋予了JavaScript强大的表达能力。今天，我们要深入探讨的，正是两把能够驯服`this`、掌控函数执行上下文的“魔法钥匙”：`call`和`apply`。它们不仅能让你精确控制`this`的指向，还能以不同姿态传递函数参数，是每个进阶JS开发者都必须掌握的利器。

想象一下，你有一个工具箱（函数），里面装着各种工具（方法），但这些工具总是根据你在哪个工作台（执行上下文）上操作而表现不同。`call`和`apply`就是让你能随时拿起任何工具，并在你指定的工作台上（即使它不属于这个工具箱）完成任务的“遥控器”。

`this`：变幻莫测的执行上下文

在深入`call`和`apply`之前，我们先快速回顾一下`this`的几种常见绑定规则：

默认绑定：在非严格模式下，独立函数调用时，`this`指向全局对象（浏览器中是`window`，中是`global`）。严格模式下是`undefined`。
隐式绑定：当函数作为对象的方法被调用时，`this`指向该对象。
显式绑定：我们今天要讲的`call`、`apply`、`bind`就是用来进行显式绑定的。
new绑定：当函数作为构造函数与`new`关键字一起使用时，`this`指向新创建的对象实例。
箭头函数：箭头函数没有自己的`this`，它会捕获其外层作用域的`this`值。

正是这种多变的`this`，让我们的代码有时会表现出“非预期”的行为。比如：

function showName() {
();
}
const person1 = {
name: '张三',
greet: showName
};
const person2 = {
name: '李四'
};
(); // 输出：张三 (隐式绑定到person1)
const standaloneShowName = ;
standaloneShowName(); // 输出：undefined 或 报错 (默认绑定到全局对象，全局对象没有name属性)

看，当`showName`函数作为`person1`的方法调用时，`this`指向`person1`。但当我们将它赋值给一个独立变量并调用时，`this`却指向了全局对象（在浏览器中是`window`），因为`window`对象上没有`name`属性，所以输出了`undefined`。这正是我们需要`call`和`apply`出马的场景。

`call`：直接点名，参数逐一传递

`call`方法允许你调用一个函数，并为它指定`this`的值以及传递参数。它的语法如下：

(thisArg, arg1, arg2, ...)

`thisArg`：在`function`函数运行时使用的`this`值。如果这个值为`null`、`undefined`，`this`将指向全局对象。如果传入原始值（字符串、数字、布尔值），`this`会包装成对应的对象。
`arg1, arg2, ...`：要传递给`function`的参数列表，它们是独立地被传递。

`call`方法会立即执行函数。我们用上面的例子来演示如何使用`call`来明确指定`this`：

function showNameAndMessage(message) {
(`${message}, 我是 ${}`);
}
const person1 = {
name: '张三'
};
const person2 = {
name: '李四'
};
(person1, '你好'); // 输出：你好, 我是 张三
(person2, 'Greetings'); // 输出：Greetings, 我是 李四

在这个例子中，即使`showNameAndMessage`不是`person1`或`person2`的方法，我们也能通过`call`方法，强制它在`person1`或`person2`的上下文中执行，从而正确地访问到``。参数`'你好'`和`'Greetings'`是作为单独的参数传递给`showNameAndMessage`的。

`apply`：清单委托，参数数组传递

`apply`方法的功能与`call`几乎一模一样，唯一的区别在于它接收参数的方式。`apply`接收一个参数数组（或类数组对象）。它的语法如下：

(thisArg, [argsArray])

`thisArg`：同`call`方法。
`argsArray`：一个数组或者类数组对象，其中的元素将作为单独的参数传给`function`。

同样，`apply`方法也会立即执行函数。让我们再次用上面的例子来演示`apply`：

function showNameAndMessage(message1, message2) {
(`${message1}, ${message2}, 我是 ${}`);
}
const person1 = {
name: '张三'
};
const person2 = {
name: '李四'
};
(person1, ['你好', '朋友']); // 输出：你好, 朋友, 我是 张三
(person2, ['Greetings', '伙伴']); // 输出：Greetings, 伙伴, 我是 李四

可以看到，`apply`将`['你好', '朋友']`这个数组作为参数列表传递给了`showNameAndMessage`。函数内部会将数组中的每个元素作为独立的参数来接收。

`call` 与 `apply` 的核心区别与应用场景

现在我们知道了`call`和`apply`的核心区别：

`call`：接受一个参数列表，参数逐个传入。
`apply`：接受一个参数数组或类数组对象，一次性传入。

那么，在实际开发中，我们应该如何选择呢？

何时使用 `call`？

当你知道函数需要接受哪些参数，并且这些参数的数量是固定的，或者你希望明确地列出每一个参数时，`call`是更直观的选择。

实现继承：在构造函数继承中，`(this, arg1, arg2)` 是非常常见的用法，用来在子类构造函数中调用父类构造函数，并绑定子类的`this`。
装饰器模式：为现有函数添加额外功能时，使用`call`来调用原始函数。


// 构造函数继承示例
function Animal(name) {
= name;
}
function Dog(name, breed) {
(this, name); // 继承Animal的name属性
= breed;
}
const myDog = new Dog('旺财', '金毛');
(); // 输出：旺财
(); // 输出：金毛

何时使用 `apply`？

当你不确定函数所需参数的数量，或者参数本身就以数组形式存在时，`apply`的优势就体现出来了。

处理动态参数：比如，一个函数可能接收数量不定的参数，这些参数通常会被收集到一个数组中（如ES6的剩余参数`...args`，或者早期的`arguments`对象）。此时，`apply`能优雅地将数组直接作为参数传入。
数组操作的技巧：JavaScript内置的`()`和`()`函数无法直接接受一个数组作为参数。但我们可以巧妙地利用`apply`来实现：


const numbers = [10, 5, 20, 15];
// ((numbers)); // 错误，需要单独的数字参数

const maxNum = (null, numbers); // null表示不关心this指向
(maxNum); // 输出：20
const minNum = (null, numbers);
(minNum); // 输出：5

将类数组对象转换为真数组：`arguments`对象就是一个类数组对象，它没有数组的方法（如`push`, `pop`, `forEach`等）。我们可以用`(arguments)`（或更简单的`[].(arguments)`）将其转换为真正的数组。


function sumAll() {
// arguments 是一个类数组对象
// const argsArray = (arguments); // 使用call
const argsArray = [].(arguments); // 使用apply

let sum = 0;
(num => {
sum += num;
});
return sum;
}
(sumAll(1, 2, 3, 4, 5)); // 输出：15

当然，在ES6及以后的版本中，我们有了更简洁的语法来处理这些场景：

数组展开运算符（Spread Operator）：`(...numbers)` 可以直接取代 `(null, numbers)`。
`()`： `(arguments)` 可以将类数组对象转换为真数组，比 `` 更具可读性。

尽管如此，理解`call`和`apply`的工作原理，对于阅读旧代码、理解底层机制以及在某些特定场景下依然至关重要。

与 `bind` 的对比（快速了解）

除了`call`和`apply`，JavaScript还有一个同样用于显式绑定`this`的方法：`bind`。

`call`和`apply`会立即执行函数。
`bind`不会立即执行函数，它会返回一个绑定了指定`this`值和预设参数的新函数。你需要手动调用这个新函数才能执行。

当你需要一个函数在将来的某个时刻（例如作为事件监听器或回调函数）被调用，并且希望它始终保持特定的`this`上下文时，`bind`就是最佳选择。

function logName() {
();
}
const person = { name: '王五' };
const boundLogName = (person); // 返回一个新函数
boundLogName(); // 输出：王五 (不会立即执行)

总结与最佳实践

到此，我们已经深入了解了JavaScript中`call`和`apply`这两把“魔法钥匙”。

它们都能显式地改变函数执行时的`this`指向。
它们都会立即执行函数。
它们唯一的区别在于参数的传递方式：`call`接收独立的参数列表，`apply`接收一个参数数组。

掌握`call`和`apply`（以及`bind`）是理解JavaScript函数式编程、对象原型链以及深入阅读和编写复杂JavaScript代码的关键一步。虽然ES6及后续版本提供了更现代、更简洁的语法（如展开运算符和箭头函数）来处理某些场景，但理解这些经典方法的底层机制，能让你更好地驾驭JavaScript这门语言，成为一名真正的高级开发者。

希望今天的分享能帮助你更好地理解和运用`call`与`apply`。如果你有任何疑问或想讨论更多JS知识点，欢迎在评论区留言！我们下期再见！

2025-10-18

---

上一篇：JavaScript：从浏览器到全栈，它拥有你想象不到的强大生态与核心能力！

下一篇：JavaScript 存储全面指南：Cookies, LocalStorage, IndexedDB... 一文搞懂前端数据持久化