17370845950

call和apply立即执行函数，区别在于参数传递方式：call用逗号分隔参数，apply用数组；bind不执行，返回预设this和参数的新函数。

call 和 apply 都立刻执行，但参数传法完全不同

这是最常混淆的点：两者都改 this 并马上运行函数，区别只在第二个及之后的参数怎么给。

• call 要求你把参数一个个列出来，用逗号分隔：func.call(obj, 'a', 123, true)
• apply 只接受一个数组（或类数组）作为参数容器：func.apply(obj, ['a', 123, true])

常见错误是把数组直接塞进 call ——比如 func.call(obj, ['a', 'b'])，结果函数只收到一个数组参数，而不是两个字符串。反过来，用 apply 传散列参数也会报错。

实用场景：

• 用 Math.max.apply(null, arr) 求数组最大值（ES6 前的标准写法）
• 把 arguments 当成数组用：Array.prototype.slice.call(arguments)

bind 不执行，只返回一个“预设好 this 和部分参数”的新函数

bind 是三者中唯一不触发函数调用的。它像订制一张“使用券”：你填好 this 和一些固定参数，它给你一个新函数，等你哪天想用了再调。

• const fn = func.bind(obj, 'x') → fn('y') 等价于 func.call(obj, 'x', 'y')
• 绑定后的 this 无法被后续的 call/apply 覆盖（硬绑定）

容易踩的坑：

• 忘记调用返回的函数：button.handleClick.bind(btn) 不加括号 () 就什么也不会发生
• 在事件监听里漏掉 bind，导致 this 指向 undefined（严格模式）或 window（非严格）

什么时候该选哪个？看三个关键动作

判断依据就三件事：要不要现在跑？参数是不是现成的数组？需不需要反复用同一套 this + 参数？

• 要立刻执行 + 参数明确 → 用 call
• 要立刻执行 + 参数在数组里 / 数量不定 → 用 apply
• 不急着执行 + 要固化 this 或预填参数 → 用 bind

现代替代建议：

• 求最大值、最小值等，优先用展开运算符：Math.max(...arr)，比 apply 更直观
• 类数组转数组，Array.from(arguments) 或 [...arguments] 比 slice.call 更安全（不会因 arguments.callee 被禁用而崩）

手写

实现能帮你真正看清差异

不是为了面试默写，而是验证理解是否到位。核心逻辑其实很轻量：

Function.prototype.myCall = function(context, ...args) {
  context = context || window;
  context.fn = this;
  const result = context.fn(...args);
  delete context.fn;
  return result;
};

Function.prototype.myApply = function(context, argsArr) {
  context = context || window;
  context.fn = this;
  const result = argsArr ? context.fn(...argsArr) : context.fn();
  delete context.fn;
  return result;
};

Function.prototype.myBind = function(context, ...presetArgs) {
  const fn = this;
  return function(...callArgs) {
    return fn.apply(context, presetArgs.concat(callArgs));
  };
};

注意：真实 bind 还要考虑构造函数调用（new boundFn() 应忽略绑定的 this），但日常业务几乎遇不到；而 call/apply 的手动实现里，delete 那步容易被忽略——不删会导致污染目标对象。

真正难的不是语法，是每次写的时候，得下意识问自己一句：“我现在是要干、要转、还是要存？”