JavaScript call/apply/bind区别案例讲解（附代码示例）

为什么要掌握call/apply/bind区别？

JavaScript发展到今天，围绕call/apply/bind区别已经形成了一套比较成熟的用法和最佳实践。本文梳理其中最实用的部分，并配上示例代码。

掌握call/apply/bind区别的几个关键

• call/apply/bind区别的默认值要搞清楚，很多 bug 都是「我以为默认是……」造成的。
• 学习call/apply/bind区别时建议画出它的执行流程图，一图胜千言。
• 掌握call/apply/bind区别之后，顺便了解它的实现原理，理解层次会完全不同。
• 处理call/apply/bind区别时考虑异常路径：网络断了、文件不存在、权限不够，分别怎么办。
• 用call/apply/bind区别处理并发场景时要格外小心，确认它是否线程安全。

动手实践：call/apply/bind区别

直接上代码，call / apply / bind 区别：

function greet(greeting, punct) {
  return `${greeting}, ${this.name}${punct}`;
}
const person = { name: '李四' };

// call：立即执行，参数逐个传
console.log(greet.call(person, '你好', '!'));

// apply：立即执行，参数用数组传
console.log(greet.apply(person, ['早上好', '～']));

// bind：不执行，返回绑好 this 的新函数
const sayHi = greet.bind(person, '嗨');
console.log(sayHi('~'));

避坑指南

• 遇到诡异问题试试最小化复现：把无关代码都删掉，问题往往立刻现形。
• 重要功能上线前，先写好回滚方案，再点开始按钮。
• 缓存是个双刃剑，改了代码不生效时，先想想是不是有缓存没清。

最后说两句

本文梳理了call/apply/bind区别的核心用法和注意事项。如果你只记住一句话，那就是：先理解场景，再选择用法。

遇见问题加 QQ23979811 协助处理