返回

再谈模拟实现 call、apply、bind 函数

前端

先说一下call和apply的模拟实现,因为bind的实现就需要借助call或apply了。

call模拟实现:

Function.prototype.myCall = function(obj, ...args) {
  // 检查参数有效性
  if (typeof this !== "function") {
    throw new Error("this is not a function");
  }
  if (obj === null || obj === undefined) {
    obj = globalThis;
  }

  // 绑定this指向
  obj.temp = this;

  // 调用函数并返回结果
  const result = obj.temp(...args);

  // 解除this指向
  delete obj.temp;

  return result;
};

apply模拟实现:

Function.prototype.myApply = function(obj, args) {
  // 检查参数有效性
  if (typeof this !== "function") {
    throw new Error("this is not a function");
  }
  if (obj === null || obj === undefined) {
    obj = globalThis;
  }

  // 绑定this指向
  obj.temp = this;

  // 调用函数并返回结果
  const result = obj.temp(...args);

  // 解除this指向
  delete obj.temp;

  return result;
};

bind的实现,根据我们之前的分析,利用call或apply去实现会更简单:

bind模拟实现:

Function.prototype.myBind = function(obj, ...args) {
  // 检查参数有效性
  if (typeof this !== "function") {
    throw new Error("this is not a function");
  }

  const fn = this;

  // 返回一个新的函数
  return function(...bindArgs) {
    // 调用原函数
    return fn.myApply(obj, [...args, ...bindArgs]);
  };
};

通过上面的模拟实现,你可以更深入地理解 call、apply、bind 的工作原理,同时锻炼你的编程能力。希望本文能帮助你成为一名更出色的 JavaScript 开发者。