JavaScript中new操作符的原理与实现详解

什么是new操作符？

new 是 JavaScript 中一个关键字，常用于创建对象实例。使用 new 创建实例时，会自动执行构造函数（constructor），并将该实例绑定到构造函数的 this 上。

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

const person1 = new Person('Alice', 28);
console.log(person1.name); // Alice
console.log(person1.age); // 28

上述代码中，我们创建了一个 Person 构造函数，并使用 new 操作符创建了一个名为 person1 的实例。Person 构造函数中的 this 自动指向 person1 实例。

new操作符的原理

在使用 new 操作符时，实际上会创建一个全新的对象，然后将该对象作为构造函数的上下文（this）传递进去。因此，如果在构造函数中使用了 this，就会将属性或方法绑定到新的对象上。

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

const person1 = new Person('Alice', 28);

上述代码中，new 操作符创建了一个空对象 person1，并将它作为 Person 构造函数的上下文（this）传递给了该函数。Person 构造函数中的 this 指向了 person1 对象，并通过属性访问器将 name 和 age 属性赋值给了该对象。

最后，构造函数会将 person1 对象返回。如果构造函数没有使用 return 语句，则默认返回该对象。

new操作符的实现

我们也可以手动实现 new 操作符的功能：

function myNew(constructorFunc, ...args) {
  // 1. 创建一个空对象
  const obj = {};
  // 2. 将空对象的原型指向构造函数的原型
  obj.__proto__ = constructorFunc.prototype;
  // 3. 在新对象上执行构造函数
  const result = constructorFunc.apply(obj, args);
  // 4. 如果构造函数返回了一个新对象，则返回该对象；否则返回创建的新对象
  if (result && (typeof result === 'object' || typeof result === 'function')) {
    return result;
  }
  return obj;
}

// 使用myNew创建一个实例
function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person2 = myNew(Person, 'Bob', 30);
console.log(person2.name); // Bob
console.log(person2.age); // 30

上述代码中，我们手动实现了一个 myNew 函数来模拟 new 操作符的功能。首先，我们创建了一个空对象 obj，并将该对象的原型指向构造函数的原型。随后，我们在该新对象上执行构造函数 constructorFunc，并将其余参数传递给构造函数。最后，我们判断构造函数是否返回了一个新对象，如果是则返回该对象，否则返回我们创建的新对象 obj。

我们也可以将该函数添加到 Object.prototype 上，使该方法可以更方便地被使用：

Object.prototype.myNew = function(constructorFunc, ...args) {
  const obj = Object.create(constructorFunc.prototype);
  const result = constructorFunc.apply(obj, args);
  if (result && (typeof result === 'object' || typeof result === 'function')) {
    return result;
  }
  return obj;
}

// 使用myNew创建一个实例
function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person3 = {}.myNew(Person, 'Linda', 26);
console.log(person3.name); // Linda
console.log(person3.age); // 26

上述代码中，我们将 myNew 方法添加到 Object.prototype 上，这样我们就可以更方便地在任意对象上使用 myNew 方法了，即 {} 和 Object.create(null) 等等。