模拟一下对象的 new 命令

2023-10-21 09:10:13

背景

JavaScript 提供了创建对象的两种主要方法。

使用字面量语法：

const obj = {
  name: "John Doe",
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

使用 new 操作符和构造函数：

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const obj = new Person("John Doe", 30);

new 运算符的工作原理

new 运算符本质上做了以下几件事：

创建一个全新的空对象。
将这个对象作为 this 值传递给构造函数。
执行构造函数的主体（代码块）。
将构造函数的 this 值返回给 new 表达式。

模拟 new 运算符

我们可以模拟 new 运算符来更好地理解它的工作原理。要做到这一点，我们需要以下步骤：

创建一个函数来模拟构造函数。
使用 apply() 方法将模拟构造函数的 this 值设置为新创建的对象。
返回新创建的对象。

以下是如何模拟 new 运算符的代码示例：

function myNew(constructor, ...args) {
  const obj = {};
  constructor.apply(obj, args);
  return obj;
}

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const obj = myNew(Person, "John Doe", 30);

obj.greet(); // Hello, my name is John Doe and I am 30 years old.