VScode插件：前端每日一题

详细说明JavaScript中的new操作符具体做了哪些事？

在 JavaScript 中，new 操作符用于创建一个对象实例。它背后的实现过程包括了几步关键操作，模拟了面向对象编程中构造函数创建对象的机制。下面详细分解 new 操作符的执行流程：

new 操作符的步骤

假设我们使用 new Constructor() 来创建一个对象实例，new 操作符实际完成了以下四个步骤：

1. 创建一个空对象：

   • new 操作符会首先创建一个新的空对象。
   • 这个对象会继承构造函数的原型（Constructor.prototype）。

2. 绑定 this：

   • 接下来，它会调用构造函数 Constructor，并将新创建的对象绑定到函数内部的 this 上。
   • 这样，构造函数内部的代码会将属性和方法添加到这个新的对象上，而不是全局对象或其他对象。

3. 设置原型链接：

   • 新创建的对象的 __proto__ 属性会被设置为构造函数的 prototype 属性，建立起继承关系。
   • 这个步骤让新对象可以访问构造函数的原型链上的属性和方法。

4. 返回对象：

   • 构造函数会默认返回新创建的对象（即 this 引用）。
   • 但是，如果构造函数返回了一个非 null 的对象，则会返回该对象，而不是新创建的对象。
   • 如果构造函数返回的是 null 或者非对象的值，则 new 操作符仍然返回创建的对象。

使用示例

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

const alice = new Person('Alice');
console.log(alice.name);  // 输出: "Alice"

在上面的代码中，new Person('Alice') 执行了四个步骤：

1. 创建一个新的空对象 {}。
2. 将这个空对象作为 this，然后调用 Person 构造函数。
3. 设置新对象的 __proto__ 指向 Person.prototype。
4. 返回新对象 alice。

模拟 new 的实现

我们可以通过一个函数来模拟 new 操作符的工作原理：

function myNew(constructor, ...args) {
  // Step 1: 创建一个新对象并将其原型设置为构造函数的 prototype
  const obj = Object.create(constructor.prototype);
  
  // Step 2: 以新对象为上下文，执行构造函数
  const result = constructor.apply(obj, args);

  // Step 3: 如果构造函数返回了一个对象，则返回该对象，否则返回新创建的对象
  return typeof result === 'object' && result !== null ? result : obj;
}

使用 myNew 示例

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

const dog = myNew(Animal, 'Dog');
console.log(dog.type);  // 输出: "Dog"
console.log(dog instanceof Animal);  // 输出: true

详解模拟 new 的过程

• Object.create(constructor.prototype)：创建一个继承 constructor.prototype 的新对象，这一步类似于 new 操作符的第一个和第三个步骤。
• constructor.apply(obj, args)：将 obj 作为 this，调用构造函数 constructor，将属性绑定到新对象上，模拟第二步。
• return 语句：确保返回值遵循 new 操作符的规则：如果构造函数返回一个对象，则返回该对象，否则返回新创建的对象。