手写call/bind/apply：前端面试的硬核通关秘籍

一、为何面试必考手写call/bind/apply？

在前端开发领域，函数调用与this绑定是JavaScript的核心机制之一。call、bind、apply作为改变函数执行上下文的方法，其底层原理涉及执行上下文栈、作用域链等关键概念。面试官通过考察手写实现，可以快速评估候选人对以下能力的掌握：

1. 底层原理理解：能否解释this的动态绑定规则，以及如何通过显式绑定修改this指向。
2. 边界条件处理：是否考虑非函数调用、参数传递、原型链继承等特殊场景。
3. 代码健壮性：能否处理异常情况（如传入null/undefined），并保证代码的可读性与可维护性。

以某大厂面试题为例：“请实现一个myCall方法，使其功能与原生call一致”。若候选人仅能背诵代码，而无法解释arguments对象处理、Symbol属性避免污染等细节，则难以通过高阶面试。

二、call方法的手写实现与解析

1. 核心逻辑

call的作用是在指定上下文中调用函数，并传递参数。其实现需完成三步：

• 将函数绑定到目标对象（作为对象的方法）。
• 通过apply或直接调用执行函数。
• 恢复原始对象状态（避免污染）。

2. 代码实现

Function.prototype.myCall = function(context, ...args) {
  // 处理context为null/undefined的情况（非严格模式指向window）
  context = context || window;
  // 使用Symbol避免属性名冲突
  const fnSymbol = Symbol('fn');
  // 将函数作为context的方法
  context[fnSymbol] = this;
  // 调用函数并传递参数
  const result = context[fnSymbol](...args);
  // 删除临时属性
  delete context[fnSymbol];
  return result;
};

3. 关键点解析

• 上下文处理：当context为null或undefined时，非严格模式下this会指向全局对象（如浏览器中的window）。
• Symbol的应用：使用Symbol作为临时属性名，避免覆盖对象原有属性。
• 参数传递：通过剩余参数...args收集参数，并使用展开运算符传递。

4. 面试常见变种

• 问题：如何实现不依赖Symbol的版本？
• 解答：可使用随机字符串或时间戳作为属性名，但需注意冲突风险。

三、apply方法的手写实现与优化

1. 与call的区别

apply与call功能一致，但参数以数组形式传递。实现时需将数组展开为参数列表。

2. 代码实现

Function.prototype.myApply = function(context, argsArray) {
  context = context || window;
  const fnSymbol = Symbol('fn');
  context[fnSymbol] = this;
  // 处理argsArray为null/undefined的情况
  const args = argsArray || [];
  const result = context[fnSymbol](...args);
  delete context[fnSymbol];
  return result;
};

3. 优化点

• 参数校验：可添加对argsArray是否为数组的检查。
• 性能优化：若参数数量固定，可直接传递而非展开数组。

四、bind方法的手写实现与高级特性

1. 核心挑战

bind返回一个新函数，其this绑定到指定对象，且支持柯里化（部分参数预填充）。实现需处理：

• 返回函数的this绑定。
• 参数合并（预填充参数与调用时参数）。
• 构造函数调用时的this重置（需通过new操作符检查）。

2. 代码实现

Function.prototype.myBind = function(context, ...boundArgs) {
  const originalFunc = this;
  function boundFunc(...args) {
    // 判断是否通过new调用
    const isNewCall = new.target !== undefined;
    const combinedContext = isNewCall ? this : context;
    return originalFunc.apply(combinedContext, [...boundArgs, ...args]);
  }
  // 继承原型链（处理new操作）
  boundFunc.prototype = Object.create(originalFunc.prototype);
  return boundFunc;
};

3. 关键细节

• new.target检测：通过new.target判断是否通过new调用，若是则忽略context绑定。
• 原型链继承：使用Object.create确保boundFunc的原型指向原函数原型，支持instanceof检查。
• 参数合并：将bind时预填充的参数与调用时参数合并。

五、面试通关技巧与避坑指南

1. 常见错误

• 忽略null/undefined处理：未考虑非严格模式下的全局对象绑定。
• 属性名冲突：未使用Symbol或随机字符串，导致对象属性被覆盖。
• new操作符支持缺失：bind实现未处理构造函数调用场景。

2. 提升代码质量的建议

• 添加参数校验：如检查context是否为对象类型。
• 支持更多边界情况：如处理原始值（number、string）作为context时的包装对象。
• 注释与可读性：在面试中，清晰的注释能体现代码设计思路。

3. 实战演练

面试题：实现一个支持柯里化的bind，并解释每一步的作用。
解答步骤：

1. 保存原函数与预填充参数。
2. 返回新函数，合并预填充与调用参数。
3. 处理new操作符的上下文重置。
4. 继承原型链以支持instanceof。

六、总结与延伸学习

手写call、bind、apply不仅是面试高频题，更是深入理解JavaScript函数调用的关键。掌握后，可进一步探索：

• 箭头函数的this绑定：为何箭头函数没有call/apply？
• 异步场景下的this：如setTimeout中的this指向问题。
• ES6类方法绑定：为何类方法通常需要显式绑定this？

通过系统练习与原理分析，开发者不仅能提升面试表现，更能在实际项目中写出更可靠的代码。