【js篇】new操作符的实现原理详解在 JavaScript 中，new 是一个非常重要的关键字，用于创建一个用户定义的

在 JavaScript 中，new 是一个非常重要的关键字，用于创建一个用户定义的对象类型的实例，或创建一个内置对象类型（如 Object、Array、Date 等）的实例。

理解 new 的执行过程，有助于我们深入掌握 JavaScript 的面向对象机制、原型链和构造函数调用机制。

✅ 一句话总结

new 操作符的执行过程包括四个关键步骤：创建空对象 → 设置原型 → 绑定 this 并执行构造函数 → 返回实例或构造函数返回的对象。

✅ 一、`new` 的执行过程详解

当你使用 new 创建一个对象时，JavaScript 引擎会自动执行以下步骤：

步骤 1️⃣：创建一个空对象

const obj = {};

创建一个全新的空对象。

步骤 2️⃣：设置原型链

obj.__proto__ = Constructor.prototype;

将新对象的原型（__proto__）指向构造函数的 prototype 属性，从而建立原型链。

步骤 3️⃣：绑定 this 并执行构造函数

Constructor.call(obj, ...args);

将构造函数中的 this 指向新创建的对象，并执行构造函数体中的代码，通常用于给对象添加属性。

步骤 4️⃣：返回对象

如果构造函数返回的是引用类型（如对象、数组、函数），则返回该对象；
如果返回的是原始类型（如数字、字符串、布尔值）或没有返回值，则返回新创建的对象。

const result = Constructor.call(obj, ...args);
return typeof result === 'object' && result !== null ? result : obj;

✅ 二、模拟实现 `new` 操作符

我们可以手动实现一个类似 new 的函数：

function myNew(constructor, ...args) {
  // 1. 创建一个空对象
  const obj = {};

  // 2. 设置原型链
  obj.__proto__ = constructor.prototype;

  // 3. 绑定 this 并执行构造函数
  const result = constructor.apply(obj, args);

  // 4. 判断返回值类型
  return typeof result === 'object' && result !== null ? result : obj;
}

✅ 使用示例：

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

Person.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}`);
};

const p1 = myNew(Person, 'Tom', 20);
console.log(p1); // Person { name: 'Tom', age: 20 }
p1.sayHello();   // Hello, I'm Tom

✅ 三、构造函数返回引用类型的影响

如果构造函数中返回一个引用类型对象，new 会返回这个对象，而不是默认创建的对象：

function Foo() {
  this.name = 'Foo';
  return { name: 'Bar' };
}

const obj = new Foo();
console.log(obj); // { name: 'Bar' }

📌 说明：

构造函数中 return { name: 'Bar' } 是一个对象；
new 就会忽略默认创建的对象，直接返回这个对象。

✅ 四、一句话总结

new 操作符的本质是创建一个新对象，并将其与构造函数的原型连接，然后执行构造函数并返回合适的对象。理解其内部机制，有助于我们更好地掌握 JavaScript 的面向对象编程和原型继承体系。

💡 进阶建议

在使用类（class）时，new 的行为与构造函数一致；
在 TypeScript 中，构造函数和 new 的使用有更强的类型约束；
在实现库或框架时，模拟 new 可用于封装对象创建逻辑；
注意构造函数中返回对象对实例化的影响；

【js篇】new操作符的实现原理详解