让函数拥有new的能力

2023-11-15 15:41:06

构造函数其实就是普通的函数，而this是在函数运行时才确定的。那么是什么导致构造函数变得如此特别了？本文将剖析构造函数的奥秘，并通过模拟new方法来实现自定义构造函数，从而更深入地理解JavaScript面向对象编程的精髓。

模拟new方法，打造自定义构造函数

让我们首先回顾一下new一个函数的执行过程：

创建一个新的对象。
将这个新对象作为this绑定到函数。
执行函数体。
返回新对象。

模拟这个过程，我们可以自定义一个New方法，如下所示：

function New(func, ...args) {
  // 创建一个新对象
  const obj = {};
  // 将这个新对象作为this绑定到函数
  const boundFunc = func.bind(obj);
  // 执行函数体
  boundFunc(...args);
  // 返回新对象
  return obj;
}

现在，我们可以使用这个New方法来模拟构造函数的行为：

function Person(name) {
  this.name = name;
}

const person1 = New(Person, "John Doe");
console.log(person1.name); // "John Doe"

我们还可以通过模拟new方法来实现函数的继承：

function Animal(name) {
  this.name = name;
}

function Dog(name, breed) {
  New(Animal, this, name);
  this.breed = breed;
}

const dog1 = New(Dog, "Buddy", "Golden Retriever");
console.log(dog1.name); // "Buddy"
console.log(dog1.breed); // "Golden Retriever"