手写call、apply、bind函数：面试必知的核心技能

在JavaScript面试中，手写call、apply和bind函数是考察开发者对函数原型、作用域链及this绑定机制理解的经典问题。这些函数不仅是ES5的核心特性，更是实现函数复用、上下文切换的关键工具。本文将从原理出发，逐步拆解实现逻辑，并提供可运行的代码示例。

一、为什么需要手写call、apply、bind？

1.1 理解this的绑定规则

JavaScript中的this指向由调用方式决定，而非定义位置。call、apply和bind的核心作用是显式绑定this，覆盖默认的绑定规则。例如：

const obj = { name: 'Alice' };
function greet() { console.log(`Hello, ${this.name}`); }
// 默认调用：this指向全局对象（非严格模式）或undefined（严格模式）
greet(); // 输出：Hello, undefined
// 使用call绑定this
greet.call(obj); // 输出：Hello, Alice

1.2 函数复用与柯里化

bind函数通过返回一个新函数，实现参数预填充和this绑定，是函数式编程中柯里化（Currying）的基础。例如：

const logName = function(age) { console.log(`${this.name}, ${age} years old`); };
const boundLogName = logName.bind({ name: 'Bob' }, 25);
boundLogName(); // 输出：Bob, 25 years old

1.3 面试考察点

• 对函数原型链的理解
• 变量作用域与闭包的应用
• 参数处理与错误校验能力

二、手写call函数的实现

2.1 实现思路

1. 将函数作为方法调用：通过obj.fn()的形式，使this指向obj。
2. 参数传递：将call的后续参数作为目标函数的参数。
3. 删除临时属性：避免污染原对象。

2.2 代码实现

Function.prototype.myCall = function(context, ...args) {
  // 处理context为null/undefined的情况（默认绑定到全局）
  context = context || window; // 非严格模式
  // 或 context = context || globalThis; // 兼容严格模式
  // 将函数作为context的方法调用
  const fnSymbol = Symbol('fn'); // 使用Symbol避免属性名冲突
  context[fnSymbol] = this;
  // 调用函数并传递参数
  const result = context[fnSymbol](...args);
  // 删除临时属性
  delete context[fnSymbol];
  return result;
};
// 测试
const obj = { value: 42 };
function showValue(prefix) {
  console.log(`${prefix}: ${this.value}`);
}
showValue.myCall(obj, 'Result'); // 输出：Result: 42

2.3 关键点解析

• Symbol的使用：避免覆盖对象原有属性。
• 参数解构：...args收集剩余参数，兼容不定长参数。
• 错误处理：若this不是函数，应抛出TypeError（实际面试中可简化）。

三、手写apply函数的实现

3.1 与call的区别

apply的第二个参数为数组或类数组对象，需将其展开为参数列表。

3.2 代码实现

Function.prototype.myApply = function(context, argsArray) {
  context = context || window;
  const fnSymbol = Symbol('fn');
  context[fnSymbol] = this;
  // 处理argsArray为null/undefined的情况
  const args = argsArray ? Array.from(argsArray) : [];
  const result = context[fnSymbol](...args);
  delete context[fnSymbol];
  return result;
};
// 测试
function concatStrings(sep, arr) {
  return arr.join(sep);
}
const result = concatStrings.myApply(null, ['-', ['a', 'b', 'c']]);
console.log(result); // 输出：a-b-c

四、手写bind函数的实现

4.1 实现难点

1. 返回新函数：需保存原函数和绑定参数。
2. 部分应用（Partial Application）：支持后续参数追加。
3. 构造函数调用支持：若绑定函数作为构造函数调用，this应指向新对象。

4.2 代码实现

Function.prototype.myBind = function(context, ...boundArgs) {
  const originalFunc = this;
  // 返回一个新函数
  const boundFunc = function(...args) {
    // 判断是否通过new调用
    const isNewCall = this instanceof boundFunc;
    const thisArg = isNewCall ? this : context;
    // 合并绑定参数和调用参数
    return originalFunc.apply(thisArg, [...boundArgs, ...args]);
  };
  // 继承原型链（解决new调用时的原型问题）
  boundFunc.prototype = originalFunc.prototype;
  return boundFunc;
};
// 测试
const person = { name: 'Charlie' };
function introduce(age, city) {
  console.log(`${this.name}, ${age}, ${city}`);
}
const boundIntro = introduce.myBind(person, 30);
boundIntro('New York'); // 输出：Charlie, 30, New York
// 测试new调用
function Person(name) { this.name = name; }
const BoundPerson = Person.myBind(null, 'Default');
const p = new BoundPerson();
console.log(p.name); // 输出：Default

4.3 关键点解析

• new操作符处理：通过instanceof检测调用方式，确保构造函数逻辑正确。
• 原型链继承：避免new调用时丢失原型方法。
• 参数合并：boundArgs和args的拼接顺序需与原生bind一致。

五、常见面试问题延伸

5.1 call/apply/bind的性能差异

• call比apply稍快（无需数组展开）。
• bind会创建新函数，增加内存开销。

5.2 替代方案与polyfill

• 使用Function.prototype.call.bind()实现快速绑定：

  const fastBind = Function.prototype.call.bind(Function.prototype.bind);

5.3 实际应用场景

• 事件监听：绑定特定上下文。

  class Button {
    constructor() {
      this.handleClick = this.handleClick.bind(this);
    }
    handleClick() { console.log(this); }
  }

• 库开发：如jQuery的$.proxy()。

六、总结与建议

1. 理解本质：call/apply是即时调用，bind是延迟绑定。
2. 边界条件：处理null/undefined上下文、参数为空等情况。
3. 实践验证：通过MDN文档和TypeScript类型定义验证实现正确性。
4. 进阶学习：研究Reflect.apply()和Proxy对函数调用的拦截。

手写这些函数不仅是面试技巧，更是深入理解JavaScript核心机制的有效途径。建议读者结合ES6类、模块化等特性，进一步探索函数式编程的边界。