巧借函数，畅游ES6：模拟bind和new之原理实现

2023-09-12 10:35:12

在广阔的JavaScript领域中，模拟bind和new是程序员们经常会遇到的挑战。ES6以其强大的特性为我们提供了这些函数的原生实现，但如果你想深入了解其内部运作机制，那么模拟实现bind和new的过程将会是一次激动人心的探索之旅。

模拟bind

bind函数的作用是将一个函数的this指向绑定到指定的对象上，即使该函数在其他地方被调用，也会保持this指向的一致性。模拟bind的实现可以让我们在不修改原函数的情况下，轻松地将函数的this指向绑定到我们想要的任何对象上。

Function.prototype.myBind = function(context) {
  if (typeof this !== "function") {
    throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
  }

  const args = Array.prototype.slice.call(arguments, 1);

  const boundFunction = function() {
    return this instanceof boundFunction
      ? this.constructor(context, ...args, ...arguments)
      : this.apply(context, args.concat(Array.prototype.slice.call(arguments)));
  };

  boundFunction.prototype = Object.create(this.prototype);

  return boundFunction;
};

模拟new

new操作符是JavaScript中创建新对象并调用构造函数的语法糖。模拟new的实现可以让我们通过指定构造函数和参数，手动创建新的对象实例。

function myNew(constructor, ...args) {
  if (typeof constructor !== "function") {
    throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
  }

  const instance = Object.create(constructor.prototype);
  const result = constructor.apply(instance, args);

  return typeof result === "object" && result !== null ? result : instance;
}