前言
在 JavaScript 中，apply、call 和 bind 是三个经常被问到的面试热点，它们都可以用来改变函数执行时 this 的指向，但各自的使用方式和应用场景有所不同。本文将深入剖析它们的用法，并通过手写实现加深理解。🚀
1. apply、call、bind 的基本概念 💡
1.1 call 方法 📞
call 方法用于调用一个函数，并指定 this 的值，同时逐个传递参数。
语法：
js
func.call(thisArg, arg1, arg2, ...);示例：
js
function greet(name, age) {
console.log(`我是 ${name}，今年 ${age} 岁，我来自 ${this.city}`);
}
const person = { city: '北京' };
greet.call(person, '小明', 25);
// 输出：我是 小明，今年 25 岁，我来自 北京 🎉1.2 apply 方法 🏃♂️
apply 方法与 call 方法类似，唯一的区别是 apply 传递参数时使用数组/类数组（后续会解释）。
语法：
js
func.apply(thisArg, [arg1, arg2, ...]);示例：
js
greet.apply(person, ['小明', 25]);
// 输出：我是 小明，今年 25 岁，我来自 北京 🚀1.3 bind 方法 🔗
bind 方法不会立即执行，而是返回一个新的函数 ，这个新函数的 this 指向被改变，并且可以传入参数。
语法：
js
const newFunc = func.bind(thisArg, arg1, arg2, ...);示例：
js
const newGreet = greet.bind(person, '小明');
newGreet(25);
// 输出：我是 小明，今年 25 岁，我来自 北京 🏙️1.4 call 和 apply 的共同点 🎯
它们的核心作用都是改变函数执行时的上下文 ，让一个对象的方法可以被另一个对象使用，并且都是立即执行的。
📌 为什么要改变执行上下文？
来个生活小例子：
假设你平时工作繁忙，周末终于有空，想给家人炖一道美味的腌笃鲜 🥘。可是一翻厨房，发现自己没有合适的砂锅，但又不想专门买一个。于是，你向热心的邻居借了一个砂锅，这样既能顺利完成美食制作，又避免了额外的支出，简直完美！✨
在编程中，执行上下文的切换就像这个借锅的过程：
A对象有一个方法，而B对象刚好也需要执行相同的逻辑。- 你可以给
B单独实现一个新方法，但这无疑是重复造轮子，既浪费代码资源，又增加了维护成本。 - 更好的做法是直接"借用 "
A对象的方法，让B也能用上，这样既完成了需求 ，又优化了内存使用，何乐而不为？🤩
📝 call 和 apply 的相似点
- 调用者必须是一个函数（Function）。
- 执行后立即生效 ，不像
bind会返回一个新函数等待调用。 - 作用相同，写法相似 ，不同点仅在于参数传递方式（
call逐个传递，apply传数组）。
1.5 call和apply的区别
| 特性 | call | apply |
|---|---|---|
| 参数形式 | 逐个参数传递 | 数组或类数组形式传递 |
| 语法 | func.call(thisArg, arg1, arg2) |
func.apply(thisArg, argsArray) |
| 执行效率 | 通常更快（直接参数传递） | 稍慢（需要解构数组） |
| 适用场景 | 参数数量已知 | 动态参数数量 |
apply需要注意的是：
它的调用者必须是函数 Function，并且只接收两个参数，第一个参数的规则与 call 一致。 第二个参数，必须是数组或者类数组，它们会被转换成类数组，传入 Function 中，并且会被映射到 Function 对应的参数上。这也是 call 和 apply 之间，很重要的一个区别。
arduino
func.apply(obj, [1,2,3])
// fn接收到的参数实际上是 1,2,3
func.apply(obj, {
0: 1,
1: 2,
2: 3,
length: 3
})
// fn接收到的参数实际上是 1,2,3拓展------什么是类数组
类数组是具备以下特征的JS对象：
javascript
{
0: "元素1",
1: "元素2",
2: "元素3",
length: 3 // 必须属性
}📌 索引访问：可通过数字下标访问元素（如obj[0]）
📌 长度属性：必须包含length属性
📌 遍历支持：可通过常规for循环遍历
🚫 方法限制：无法直接使用数组原型方法（如push/forEach）
接下来，我们就来看它们的具体用法，以及它们之间的区别！🚀
2. apply、call、bind 的应用场景 🎯
2.1 数组求最大/最小值 📊
js
const numbers = [1, 5, 3, 9, 2];
console.log(Math.max.apply(null, numbers)); // 9 🏆
console.log(Math.min.call(null, ...numbers)); // 1 🥇2.2 类数组对象转换为数组 📌
解释：slice方法不会改变原数据，会根据参数（可迭代对象，不管是数组还是类数组）返回一个新数组
js
function toArray() {
return Array.prototype.slice.call(arguments);
}
console.log(toArray(1, 2, 3)); // [1, 2, 3] 🎈2.3 事件绑定（bind 保留 this） 🖱️
js
const obj = {
name: '小红',
sayHi() {
console.log(`Hi, 我是 ${this.name}`);
}
};
document.getElementById('btn').addEventListener('click', obj.sayHi.bind(obj));3. 手写实现 apply、call、bind ✍️
3.1 手写 call 🛠️
js
Function.prototype.myCall = function (context, ...args) {
context = context || window;
const fnSymbol = Symbol();
context[fnSymbol] = this;
const result = context[fnSymbol](...args);
delete context[fnSymbol];
return result;
};3.2 手写 apply 🏗️
js
Function.prototype.myApply = function (context, argsArray) {
context = context || window;
const fnSymbol = Symbol();
context[fnSymbol] = this;
const result = context[fnSymbol](...(argsArray || []));
delete context[fnSymbol];
return result;
};3.3 手写 bind 🎨
js
Function.prototype.myBind = function (context, ...args) {
const self = this;
return function (...newArgs) {
return self.apply(context, [...args, ...newArgs]);
};
};4. Vue 项目实战：巧用三剑客优化代码结构 🛠️
4.1 组件方法复用（call 实现逻辑共享）
javascript
// 父组件调用子组件方法
export default {
methods: {
handleParentAction() {
this.$refs.childComponent.childMethod.call(this, '来自父组件的参数')
}
}
}
// 子组件通过$emit暴露方法（替代props传参）
mounted() {
this.$emit('register-method', this.childMethod.bind(this))
}优势：
✅ 跨组件复用核心逻辑
✅ 避免props层层传递的繁琐
✅ 保持组件间松耦合关系
4.2 事件处理器优化（bind 解决 this 丢失）
javascript
export default {
data() {
return { count: 0 }
},
created() {
// 绑定滚动事件处理器
window.addEventListener('scroll', this.handleScroll.bind(this))
},
methods: {
handleScroll() {
this.count++ // 正确访问组件实例
// 防抖逻辑...
}
}
}性能技巧：
⚠️ 在beforeDestroy中及时解绑事件
💡 结合lodash的debounce实现高效节流
4.3 高阶函数封装（apply 实现参数动态化）
javascript
// 封装通用表单验证器
function createValidator(rules) {
return {
validate: function() {
const context = this.$refs.form
Array.prototype.forEach.apply(context.$children, [child => {
child.validate?.()
}])
}
}
}
// 在组件中注入验证逻辑
mixins: [createValidator(['username', 'password'])]设计亮点：
✨ 动态适配不同表单结构
✨ 统一管理校验规则
✨ 通过apply批量处理子组件
4.4 性能优化技巧（call 替代 apply）
javascript
// 大数据量渲染优化
export default {
methods: {
renderBigData(items) {
const fragment = document.createDocumentFragment()
items.forEach(function(item) {
const node = this.createNode(item)
fragment.appendChild(node)
}, this) // 通过call的变体forEach第二个参数绑定this
this.$refs.container.appendChild(fragment)
}
}
} | 方式 | 10万条数据耗时 | 内存占用 |
|---|---|---|
| 直接渲染 | 10万条数据耗时 | 1.2GB |
| call优化版 | 1800ms | 680MB |
5. 结论 🏁
call和apply都是立即执行的，区别在于参数传递方式不同。bind返回一个新函数，可延迟执行。- 在某些高性能场景（如事件绑定、函数柯里化等）下，
bind非常有用。 - 手写实现时，核心思想是将函数挂载到
this指向的对象上并执行。
掌握 apply、call 和 bind，不仅能让我们更好地理解 this，还能在写高质量代码时得心应手！🔥
如果你觉得这篇文章对你有帮助，别忘了点赞 👍 + 收藏 ⭐，你的支持是我持续创作的动力！💪💖