17370845950

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

call 和 apply 都是用来显式设置 this 的函数调用方式

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

什么时候必须用 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 拿到的参数数组）

call 和 apply 的参数差异与陷阱

第一个参数都是目标 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

现代替代方案：优先考虑 bind 或展开运算符

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

• 代替 apply 调用数组参数：

  fn(...argsArray)

  （更简洁，但不兼容 IE）
• 需要多次调用且 this 固定，用 bind 创建新函数：

  const boundFn = fn.bind(obj, 'fixedArg');

• bind 返回的是函数，不立即执行；call/apply 是立即执行

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