javascript call和apply是什么_如何显式设置函数上下文？

夜晨 2026-01-11 00:00:00 次阅读

call和apply均用于显式绑定this并立即调用函数，区别在于call传逗号分隔参数、apply传数组；适用于借用方法、构造继承、事件回调等场景。

它们本质一样：强制让一个函数在指定对象上执行，把 this 绑定到那个对象。区别只在参数传递形式——call 用逗号分隔的参数列表，apply 用一个数组（或类数组）。

常见于需要「借用方法」或「动态绑定上下文」的场景，比如：

让数组方法处理类数组（如 arguments、NodeList）：
```
Array.prototype.slice.call(arguments)
```
继承构造函数时复用父类初始化逻辑：
```
Parent.call(this, name, age)
```
事件回调中保持正确的 this（尤其在老式 DOM 绑定里）：
```
btn.onclick = function() { handler.apply(context, arguments); };
```
批量调用带固定 this 的函数，但参数来源不同（比如从 API 拿到的参数数组）

第一个参数都是目标 this，后续才是传给原函数的实参。容易出错的地方在于：

call 后面所有参数依次传入：
```
fn.call(obj, 'a', 'b', 123)
```
→ fn('a', 'b', 123)
apply 第二个参数必须是数组或类数组（如 arguments），不能直接写多个值：
```
fn.apply(obj, ['a', 'b', 123])
```
✅；
```
fn.apply(obj, 'a', 'b')
```
❌（会报错）
如果传了 null 或 undefined 作第一个参数，在非严格模式下，this 会自动变*局对象（window 或 global）；严格模式下就是字面量的 null/undefined
箭头函数没有自己的 this，call/apply 对它无效——它始终沿用定义时的外层 this

如果只是想「预设 this 和部分参数」，bind 更合适；如果只是转发参数，ES6+ 可用展开运算符避免 apply：

代替 apply 调用数组参数：
```
fn(...argsArray)
```
（更简洁，但不兼容 IE）
需要多次调用且 this 固定，用 bind 创建新函数：
```
const boundFn = fn.bind(obj, 'fixedArg');
```
bind 返回的是函数，不立即执行；call/apply 是立即执行

真正绕不开 call/apply 的地方，往往是需要「一次性动态绑定 + 立即执行」，且参数结构不确定（比如代理任意函数调用）。