手写call、apply与bind：面试必知的JavaScript核心技巧

在前端开发面试中，手写call、apply和bind方法已成为高频考点。这些方法不仅体现了开发者对JavaScript函数调用机制的理解，更是解决this指向问题的关键工具。本文将从底层原理出发，逐步实现这三个方法，并分析其应用场景与注意事项。

一、call方法的手写实现

1. call方法的核心作用

call方法允许显式指定函数执行时的this值，并接收参数列表。其原型为：

Function.prototype.myCall = function(context, ...args) {
  // 实现代码
}

2. 实现步骤详解

步骤1：处理context参数
当未传入context时，默认指向全局对象（非严格模式）或undefined（严格模式）。需显式处理：

context = context || window; // 非严格模式
// 或 context = context ?? globalThis; // 更现代的写法

步骤2：绑定this到context
通过临时属性将函数挂载到context对象，利用属性访问特性实现this绑定：

const fnSymbol = Symbol('fn'); // 避免属性名冲突
context[fnSymbol] = this; // this指向调用myCall的函数

步骤3：执行函数并清理
使用展开运算符传递参数，执行后删除临时属性：

const result = context[fnSymbol](...args);
delete context[fnSymbol];
return result;

3. 完整实现代码

Function.prototype.myCall = function(context, ...args) {
  if (typeof this !== 'function') {
    throw new TypeError('Not a function');
  }
  context = context || globalThis;
  const fnKey = Symbol('fn');
  context[fnKey] = this;
  const result = context[fnKey](...args);
  delete context[fnKey];
  return result;
};

4. 边界条件处理

• 非函数调用：需校验this是否为函数
• 原始值context：如number/string会被自动装箱为对象
• Symbol属性冲突：使用Symbol确保属性名唯一性

二、apply方法的实现差异

1. 与call的核心区别

apply的第二个参数为数组或类数组对象，需特殊处理参数展开：

Function.prototype.myApply = function(context, argsArray) {
  // argsArray可能为null/undefined，需默认处理
  const args = argsArray || [];
  // 其余逻辑与call类似
};

2. 完整实现代码

Function.prototype.myApply = function(context, argsArray) {
  if (typeof this !== 'function') {
    throw new TypeError('Not a function');
  }
  context = context || globalThis;
  const fnKey = Symbol('fn');
  context[fnKey] = this;
  const result = context[fnKey](...(argsArray || []));
  delete context[fnKey];
  return result;
};

3. 性能优化点

• 使用...运算符展开数组比直接apply有轻微性能损耗
• 在ES6+环境中，可直接使用原生apply更高效

三、bind方法的深度实现

1. bind的核心特性

bind返回新函数，并支持柯里化（部分参数预置）：

const boundFunc = func.bind(context, arg1, arg2);
boundFunc(arg3); // 相当于func.call(context, arg1, arg2, arg3)

2. 实现难点解析

柯里化处理：需保存预置参数，并与后续调用参数合并：

Function.prototype.myBind = function(context, ...boundArgs) {
  const originalFunc = this;
  return function(...args) {
    // 处理new操作符情况
    if (new.target) {
      return new originalFunc(...boundArgs, ...args);
    }
    return originalFunc.apply(context, [...boundArgs, ...args]);
  };
};

new操作符兼容：当通过new调用绑定函数时，this应指向新对象而非绑定的context。

3. 完整实现代码

Function.prototype.myBind = function(context, ...boundArgs) {
  if (typeof this !== 'function') {
    throw new TypeError('Not a function');
  }
  const originalFunc = this;
  const boundFunc = function(...args) {
    const isNewCall = new.target !== undefined;
    return originalFunc.apply(
      isNewCall ? this : context,
      [...boundArgs, ...args]
    );
  };
  // 继承原型链（可选）
  Object.setPrototypeOf(boundFunc, originalFunc.prototype);
  return boundFunc;
};

4. 高级应用场景

• 部分应用：预置部分参数实现函数复用

  const log = console.log.bind(console, 'DEBUG:');
  log('Message'); // 输出: DEBUG: Message

• 事件监听：绑定特定this和参数

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

四、实战中的注意事项

1. 性能对比分析

方法	参数传递方式	适用场景
call	列表	参数数量明确且较少时
apply	数组	参数数量不确定或来自数组时
bind	柯里化	需要固定this和部分参数时

2. 常见错误规避

• 箭头函数：箭头函数无this绑定，调用call/apply无效

  const arrow = () => console.log(this);
  arrow.call({}); // 仍输出全局this

• 严格模式：未指定context时this为undefined而非全局对象
• 原型链污染：手写实现中临时属性需使用Symbol避免冲突

3. 现代JavaScript替代方案

• 箭头函数：自动继承外层this

  const obj = {
    method: function() {
      const arrow = () => console.log(this);
      arrow(); // this指向obj
    }
  };

• 类字段语法：简化this绑定

  class Example {
    handler = () => {
      console.log(this); // 自动绑定
    };
  }

五、面试应对策略

1. 理解深度考察点

面试官通过此题评估：

• 对this机制的掌握程度
• 函数调用栈的理解
• 边界条件处理能力
• 代码健壮性意识

2. 回答技巧建议

1. 先实现核心逻辑：优先完成基础功能
2. 逐步完善边界：再处理异常情况和优化
3. 对比原生方法：说明实现与原生方法的差异
4. 展示应用场景：结合实际代码说明用法

3. 延伸问题准备

• 如何实现Function.prototype.bind的polyfill？
• call/apply的性能差异有多大？
• 在什么情况下必须使用bind而非箭头函数？

结语

手写call、apply和bind不仅是面试中的高频考点，更是深入理解JavaScript函数执行机制的关键。通过本文的实现与分析，开发者不仅能掌握这三个方法的核心原理，更能提升对this绑定、闭包、原型链等基础概念的理解。在实际开发中，合理使用这些方法可以解决许多this指向的棘手问题，写出更健壮、更灵活的代码。

建议读者在理解实现原理后，尝试在项目中应用这些方法，并对比原生实现与手写实现的差异。随着ES6+的普及，虽然许多场景可以被箭头函数和类字段语法替代，但底层原理的理解仍是成为高级JavaScript开发者的必经之路。