call、apply 和 bind 是 JavaScript 函数原型（Function.prototype）上的三个核心方法，它们共同构成了显式绑定函数执行上下文（this）的基石。它们不仅是解决 this 绑定问题的利器，更是实现函数式编程、代码复用和高级设计模式的关键工具。本文将从底层机制、手写实现到实际应用，进行全方位深度剖析。
一、核心目标：操控 this 与参数
JavaScript 的 this 绑定规则（默认、隐式、显式、new）有时无法满足需求。call、apply 和 bind 提供了显式绑定的能力，让我们可以精确控制：
this的指向：函数执行时，this应该绑定到哪个对象。- 函数的参数：如何传递参数给函数。
它们解决了诸如“方法借用”、“this 丢失”、“函数柯里化”等经典问题。
二、call：立即执行，参数列表
1. 语法与行为
func.call(thisArg, arg1, arg2, /* ..., */ argN)
- 立即调用
func函数。 - 将
func内部的this临时绑定到thisArg。 - 参数以逗号分隔的列表形式传入。
2. 关键特性
- 执行时机：立即执行。
this绑定：仅在本次调用中有效，调用结束后this绑定即失效。- 返回值：
func函数的返回值。
3. 应用场景
场景 1：方法借用（Method Borrowing）
const person = {
name: 'Alice',
introduce(greeting, punctuation) {
return `${greeting}, I'm ${this.name}${punctuation}`;
}
};
const animal = { name: 'Dog' };
const robot = { name: 'T-800' };
// 让 animal 和 robot 借用 person 的 introduce 方法
console.log(person.introduce.call(animal, 'Hi', '!')); // "Hi, I'm Dog!"
console.log(person.introduce.call(robot, 'Greetings', '.')); // "Greetings, I'm T-800."
场景 2：类数组对象转数组
function example() {
// arguments 是类数组对象，没有 Array.prototype 的方法
// console.log(arguments.slice(1)); // TypeError: arguments.slice is not a function
// 使用 call 借用 Array.prototype.slice
const argsArray = Array.prototype.slice.call(arguments, 1);
console.log(argsArray); // [2, 3, 4]
}
example('a', 2, 3, 4);
场景 3：调用父类构造函数（ES5 风格）
function Parent(name) {
this.name = name;
}
function Child(name, age) {
// 借用 Parent 构造函数，设置 this.name
Parent.call(this, name);
this.age = age;
}
const child = new Child('Bob', 10);
console.log(child); // Child { name: 'Bob', age: 10 }
三、apply：立即执行，参数数组
1. 语法与行为
func.apply(thisArg, [argsArray])
- 立即调用
func函数。 - 将
func内部的this临时绑定到thisArg。 - 参数以单个数组或类数组对象的形式传入。
2. 与 call 的核心区别
| 特性 | call | apply |
|---|---|---|
| 参数形式 | arg1, arg2, ... (参数列表) | [arg1, arg2, ...] (数组) |
| 适用场景 | 参数数量和值已知 | 参数数量不确定或已是数组形式 |
3. 应用场景
场景 1：Math 函数操作数组
const numbers = [5, 3, 8, 1, 9];
// Math.max 期望接收多个参数，而非一个数组
// const max = Math.max(numbers); // NaN
// 使用 apply 将数组“展开”为参数列表
const max = Math.max.apply(null, numbers);
console.log(max); // 9
// 现代替代方案 (ES6+)
const maxModern = Math.max(...numbers); // 推荐
场景 2：动态参数调用
function logArgs(prefix) {
console.log(prefix, ...arguments);
}
const args = ['INFO:', 'User', 'logged', 'in'];
logArgs.apply(null, args);
// 输出: INFO: User logged in
场景 3：函数代理（Proxy）
function logAndExecute(func, thisArg, argsArray) {
console.log('Executing:', func.name);
return func.apply(thisArg, argsArray);
}
const result = logAndExecute(Math.max, null, [1, 5, 3]);
console.log(result); // 5
四、bind：创建新函数，永久绑定
1. 语法与行为
const boundFunc = func.bind(thisArg, arg1, arg2, /* ..., */ argN)
- 不立即执行
func。 - 返回一个全新的函数
boundFunc。 boundFunc内部的this被永久绑定到thisArg。- 可以预设部分参数（函数柯里化）。
2. 核心特性
- 返回新函数：原函数
func保持不变。 - 永久绑定：
boundFunc的this指向在bind时确定，后续无法通过call/apply改变。 - 柯里化支持：允许部分应用（Partial Application）。
- 构造函数兼容：当
boundFunc用new调用时，thisArg会被忽略，this指向新创建的实例，但预设参数依然有效。
3. 应用场景
场景 1：解决事件处理中的 this 丢失
class Button {
constructor(element) {
this.element = element;
this.clicks = 0;
// ❌ 错误：this 指向 button 元素
// element.addEventListener('click', this.handleClick);
// ✅ 正确：使用 bind 确保 this 永远指向 Button 实例
element.addEventListener('click', this.handleClick.bind(this));
}
handleClick() {
this.clicks++;
console.log(`Clicked ${this.clicks} times`);
}
}
场景 2：函数柯里化（Currying）
function multiply(a, b) {
return a * b;
}
// 创建一个“乘以 2”的函数
const double = multiply.bind(null, 2);
console.log(double(5)); // 10
// 创建一个“乘以 3”的函数
const triple = multiply.bind(null, 3);
console.log(triple(4)); // 12
// 更复杂的柯里化
function greet(greeting, name, punctuation) {
return `${greeting}, ${name}${punctuation}`;
}
const sayHello = greet.bind(null, 'Hello');
const sayHelloToAlice = sayHello.bind(null, 'Alice');
console.log(sayHelloToAlice('!')); // "Hello, Alice!"
场景 3：方法固化与 API 设计
const logger = {
prefix: 'LOG:',
log(message) {
console.log(`${this.prefix} ${message}`);
}
};
// 创建一个独立的日志函数，this 永远指向 logger
const boundLog = logger.log.bind(logger);
boundLog('Application started'); // LOG: Application started
// 即使尝试用 call 改变 this，也无效
boundLog.call({ prefix: 'ERROR:' }, 'Test'); // LOG: Test (prefix 仍是 'LOG:')
五、三者深度对比
| 特性 | call | apply | bind |
|---|---|---|---|
| 执行时机 | 立即执行 | 立即执行 | 返回新函数，延迟执行 |
this 绑定 | 临时（本次调用） | 临时（本次调用） | 永久（新函数的所有调用） |
| 参数传递 | arg1, arg2, ... | [arg1, arg2, ...] | arg1, arg2, ... (预设) |
| 返回值 | 原函数的返回值 | 原函数的返回值 | 一个新函数 |
| 可重用性 | 否（每次需重新 call） | 否（每次需重新 apply） | 是（新函数可多次调用） |
| 柯里化 | 不支持 | 不支持 | 支持 |
new 调用 | 普通函数调用 | 普通函数调用 | 忽略 thisArg，创建新实例 |
记忆口诀：
call：Comma-separated, Act now.apply：Array of args, Play now.bind：Build new, Invinciblethis, Never changes.
六、手写实现：探秘底层原理
1. 手写 call
Function.prototype.myCall = function(thisArg, ...args) {
// 1. 处理 null/undefined，指向全局对象
if (thisArg == null) {
thisArg = typeof window !== 'undefined' ? window : global;
}
// 2. 确保 thisArg 是对象（防止原始值）
thisArg = Object(thisArg);
// 3. 将函数作为 thisArg 的临时方法
const fnSymbol = Symbol('fn');
thisArg[fnSymbol] = this; // this 指向调用 myCall 的函数
// 4. 执行函数
const result = thisArg[fnSymbol](...args);
// 5. 清理并返回结果
delete thisArg[fnSymbol];
return result;
};
// 测试
const obj = { value: 42 };
function getValue() { return this.value; }
console.log(getValue.myCall(obj)); // 42
2. 手写 apply
Function.prototype.myApply = function(thisArg, argsArray) {
if (thisArg == null) {
thisArg = typeof window !== 'undefined' ? window : global;
}
thisArg = Object(thisArg);
const fnSymbol = Symbol('fn');
thisArg[fnSymbol] = this;
let result;
if (argsArray == null) {
result = thisArg[fnSymbol]();
} else if (Array.isArray(argsArray) || (argsArray != null && typeof argsArray.length === 'number')) {
// 支持类数组对象
result = thisArg[fnSymbol](...argsArray);
} else {
throw new TypeError('Second argument must be an array or array-like object');
}
delete thisArg[fnSymbol];
return result;
};
3. 手写 bind（完整版，支持 new）
Function.prototype.myBind = function(thisArg, ...boundArgs) {
const originalFunc = this;
// 检查原函数是否为构造函数
if (typeof originalFunc !== 'function') {
throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
}
// 返回的新函数
const boundFunc = function(...args) {
// 判断是否用 new 调用
const isNew = new.target !== undefined;
// 如果用 new 调用，this 指向新创建的实例，忽略 bind 的 thisArg
const thisToUse = isNew ? this : thisArg;
// 执行原函数，合并预设参数和调用时参数
return originalFunc.apply(thisToUse, [...boundArgs, ...args]);
};
// 维护原型链：确保 new boundFunc() 能正确继承原函数的原型
// 如果原函数有 prototype，新函数的 prototype 也应继承它
if (originalFunc.prototype) {
// 创建一个空函数作为中转，避免直接修改原函数 prototype
function Empty() {}
Empty.prototype = originalFunc.prototype;
boundFunc.prototype = new Empty();
}
return boundFunc;
};
// 测试
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() { return `Hi, I'm ${this.name}`; };
const boundPerson = Person.myBind(null, 'Alice');
const instance = new boundPerson(30); // new 调用
console.log(instance); // Person { name: 'Alice', age: 30 }
console.log(instance.greet()); // "Hi, I'm Alice"
七、高级应用与最佳实践
1. bind 的“硬绑定”与 new 的优先级
bind 的 this 绑定是“硬绑定”，但 new 操作符的优先级更高。当 boundFunc 用 new 调用时，thisArg 被忽略，this 指向新实例，但预设参数依然有效。
2. 性能考量
call/apply：每次调用都有绑定开销，适合一次性操作。bind：创建新函数有开销，但后续调用无绑定开销，适合重复使用的场景（如事件监听器）。
3. 现代替代方案
- 扩展运算符
...：替代apply用于数组展开。 - 箭头函数：解决
this丢失问题，但语义不同（词法this）。 Function.prototype.bind()的语法糖：某些库提供更简洁的绑定方式。
八、总结
call、apply、bind 是 JavaScript 灵活性的体现：
call和apply是“执行器”，用于一次性地改变函数的执行上下文和参数。bind是“绑定器”和“柯里化器”，用于创建一个永久绑定上下文和预设参数的新函数。
掌握它们，你不仅能解决 this 相关的疑难杂症，更能写出更优雅、更复用、更函数式的代码。它们是每个 JavaScript 开发者必须精通的核心技能。
