# JavaScript中的call、apply、bind：用法、实现与区别详解## 核心概念
这三个方法都用于改变函数执行时的`this`指向，是JavaScript中函数上下文操作的核心API。## 1. 基本用法对比### call方法
```javascript
function.call(thisArg, arg1, arg2, ...)
特点：
- 立即执行函数
- 参数逐个传递
- 典型应用：类数组转数组
// 将arguments转为真实数组
function example() {const args = Array.prototype.slice.call(arguments);
}
apply方法
function.apply(thisArg, [argsArray])
特点：
- 立即执行函数
- 参数以数组形式传递
- 典型应用：数学计算
// 求数组最大值
const numbers = [5, 6, 2, 3, 7];
const max = Math.max.apply(null, numbers);
bind方法
function.bind(thisArg[, arg1[, arg2[, ...]]])
特点：
- 返回新函数不立即执行
- 可预设参数（柯里化）
- 典型应用：事件回调
// React类组件中绑定this
class Button extends React.Component {constructor() {this.handleClick = this.handleClick.bind(this);}
}
2. 手写实现原理
实现call
Function.prototype.myCall = function(context = window, ...args) {const fnKey = Symbol('fn');context[fnKey] = this;const result = context[fnKey](...args);delete context[fnKey];return result;
};
实现apply
Function.prototype.myApply = function(context = window, args = []) {const fnKey = Symbol('fn');context[fnKey] = this;const result = context[fnKey](...args);delete context[fnKey];return result;
};
实现bind（完整版）
Function.prototype.myBind = function(context, ...bindArgs) {const self = this;const boundFunction = function(...callArgs) {// 判断是否作为构造函数调用const isNew = this instanceof boundFunction;return self.apply(isNew ? this : context,bindArgs.concat(callArgs)};// 保持原型链boundFunction.prototype = Object.create(self.prototype);return boundFunction;
};
3. 三者的核心区别
| 特性 | call | apply | bind |
|---|---|---|---|
| 执行时机 | 立即执行 | 立即执行 | 返回绑定函数 |
| 参数形式 | 参数列表 | 参数数组 | 参数列表 |
| 使用场景 | 明确参数个数时 | 参数数量不定时 | 需要延迟执行时 |
| 性能 | 最快 | 次之 | 最慢（需创建新函数） |
| 构造函数 | 可作构造函数 | 可作构造函数 | 可作构造函数 |
4. 高级应用场景
组合继承（call + prototype）
function Parent(name) {this.name = name;
}function Child(name, age) {Parent.call(this, name); // 继承属性this.age = age;
}Child.prototype = Object.create(Parent.prototype);
参数柯里化（bind）
function add(a, b, c) {return a + b + c;
}const add5 = add.bind(null, 2, 3);
console.log(add5(5)); // 10 (2+3+5)
替代箭头函数（bind）
// 在需要动态this又需要prototype时
function Logger() {this.log = function() {setTimeout(function() {console.log(this); // 默认window}.bind(this), 1000);};
}
5. 面试常见问题
Q1：这三个方法改变this指向的原理是什么？
本质是通过将函数临时挂载到目标对象上调用，利用隐式绑定规则实现this指向改变
Q2：bind后的函数还能改变this吗？
不能，bind是硬绑定，但可通过new运算符覆盖
Q3：如何实现bind的new操作兼容？
在手写实现中通过
this instanceof boundFunction判断
Q4：这三个方法在严格模式下的表现？
当thisArg为null/undefined时：
- 非严格模式：替换为全局对象
- 严格模式：保持为null/undefined
掌握这三个方法不仅能应对面试，更能写出更灵活的JavaScript代码。建议通过实际项目练习加深理解！
