登录
首页 >  文章 >  前端

手写callapplybind，JS面试必考技巧

时间：2026-02-24 14:30:07 488浏览 收藏

本文深入解析了JavaScript中改变函数this指向的三大核心方法——call、apply和bind的底层原理与手写实现，不仅清晰对比了三者在参数传递（列表vs数组）、执行时机（立即执行vs返回绑定函数）及特殊场景（如new调用优先级、柯里化支持）上的关键差异，还通过简洁可靠的代码示例展示了如何安全处理上下文绑定、避免属性污染（如使用Symbol）、正确继承原型链以及应对构造函数调用等易错细节，是前端面试必攻必懂的硬核知识点。

手写call、apply、bind函数实现_js面试必备

在JavaScript中，call、apply 和 bind 是改变函数执行上下文的核心方法。面试中常被要求手写实现这三个方法，理解它们的原理对掌握this指向机制非常重要。下面分别实现它们的简化版，适用于大多数基础场景。

1. 手写 call 函数

call 的作用是调用函数，并指定其 this 指向，同时可以传入参数列表。

核心思路：将函数作为传入对象的一个临时方法调用，执行后删除该方法。

Function.prototype.myCall = function(context, ...args) {
  // 如果 context 为 null 或 undefined，则默认绑定到 window
  context = context || window;
  // 将函数挂到 context 上作为临时方法
  const fnSymbol = Symbol('fn');
  context[fnSymbol] = this; // this 指向调用 myCall 的函数
  // 执行函数并传参
  const result = context[fnSymbol](...args);
  // 删除临时属性
  delete context[fnSymbol];
  return result;
};

2. 手写 apply 函数

apply 和 call 类似，区别在于第二个参数是数组形式传参。

Function.prototype.myApply = function(context, args) {
  context = context || window;
  const fnSymbol = Symbol('fn');
  context[fnSymbol] = this;
  let result;
  if (args) {
    result = context[fnSymbol](...args); // 展开数组参数
  } else {
    result = context[fnSymbol]();
  }
  delete context[fnSymbol];
  return result;
};

3. 手写 bind 函数

bind 不立即执行函数，而是返回一个新函数，这个新函数的 this 被永久绑定到指定对象，支持预设部分参数（柯里化）。

注意：bind 返回的函数还能被 new 调用，此时 this 应指向实例，而不是绑定的对象。

Function.prototype.myBind = function(context, ...args1) {
  const fn = this; // 保存原函数
  const boundFn = function(...args2) {
    // 判断是否被 new 调用
    return fn.apply(
      this instanceof boundFn ? this : context, // new 时 this 指向实例
      args1.concat(args2) // 合并预设参数和调用时参数
    );
  };
  // 继承原函数原型
  boundFn.prototype = Object.create(this.prototype);
  return boundFn;
};

基本上就这些。掌握这三个手写实现，关键在于理解 this 的动态绑定机制、参数处理以及 new 调用的优先级高于 bind。面试时能清晰解释每一步的作用，加分不少。不复杂但容易忽略细节，比如 Symbol 防止属性覆盖、new 的特殊情况处理等。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>