如何手写JS中的`new`：从原理到实现的全解析

一、new操作符的核心作用

在JavaScript中，new操作符用于基于构造函数创建实例对象，其核心功能包括：

1. 创建新对象：分配内存空间，生成一个空对象。
2. 链接原型链：将新对象的__proto__指向构造函数的prototype属性。
3. 绑定执行上下文：将构造函数内的this指向新对象。
4. 处理返回值：若构造函数返回对象，则直接返回该对象；否则返回新对象。

示例验证

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  console.log(`Hello, ${this.name}`);
};
const p = new Person('Alice');
p.sayHello(); // 输出: Hello, Alice
console.log(p instanceof Person); // true

此例中，new完成了对象创建、原型链接及this绑定，最终返回实例p。

二、手写myNew的步骤分解

步骤1：创建新对象

通过Object.create()或字面量{}创建对象，但需确保原型链正确。更推荐使用Object.create(Constructor.prototype)，因为它直接关联原型。

步骤2：执行构造函数

使用apply或call将构造函数的this绑定到新对象，并传递参数。

步骤3：处理返回值

检查构造函数是否返回对象，若有则返回该对象，否则返回新对象。

完整代码实现

function myNew(Constructor, ...args) {
  // 1. 创建新对象并链接原型
  const obj = Object.create(Constructor.prototype);
  // 2. 执行构造函数，绑定this
  const result = Constructor.apply(obj, args);
  // 3. 处理返回值
  return result instanceof Object ? result : obj;
}
// 测试用例
function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  console.log(`${this.name} makes a noise.`);
};
const dog = myNew(Animal, 'Rex');
dog.speak(); // 输出: Rex makes a noise.
console.log(dog instanceof Animal); // true

三、边界条件与异常处理

1. 构造函数非函数类型

若Constructor不是函数，apply会抛出错误。需添加类型检查：

function myNew(Constructor, ...args) {
  if (typeof Constructor !== 'function') {
    throw new TypeError('Constructor must be a function');
  }
  // 其余代码同上
}

2. 构造函数返回原始值

当构造函数返回null、undefined或原始值时，应忽略返回值：

function Test() {
  this.value = 42;
  return null; // 或 return undefined;
}
const t = myNew(Test);
console.log(t.value); // 42

3. 构造函数返回对象

若返回对象，则直接使用该对象：

function ReturnObj() {
  this.data = 'original';
  return { data: 'overridden' };
}
const ro = myNew(ReturnObj);
console.log(ro.data); // 'overridden'

四、与原生new的性能对比

在V8引擎中，原生new经过高度优化，而自定义myNew需通过函数调用和原型操作完成，性能略低。但在以下场景中，myNew仍有价值：

1. 学习原理：深入理解new的内部机制。
2. 框架开发：如需扩展实例化逻辑（如AOP切面）。
3. 兼容性处理：在极端环境下模拟new行为。

五、实际应用案例

案例1：实现带日志的实例化

function loggedNew(Constructor, ...args) {
  console.log(`Creating instance of ${Constructor.name} with args:`, args);
  const obj = Object.create(Constructor.prototype);
  const result = Constructor.apply(obj, args);
  return result instanceof Object ? result : obj;
}
function User(id, name) {
  this.id = id;
  this.name = name;
}
const u = loggedNew(User, 1, 'Bob');
// 控制台输出: Creating instance of User with args: [1, 'Bob']

案例2：结合工厂模式

function createCar(model, year) {
  function Car(model, year) {
    this.model = model;
    this.year = year;
  }
  return myNew(Car, model, year);
}
const myCar = createCar('Tesla', 2023);
console.log(myCar.model); // 'Tesla'

六、常见误区与避坑指南

1. 忽略原型链：直接使用{}创建对象会导致instanceof失败。

   // 错误示例
   function badNew(Constructor, ...args) {
     const obj = {}; // 缺少原型链接
     Constructor.apply(obj, args);
     return obj;
   }
   const bad = badNew(Person, 'Charlie');
   console.log(bad instanceof Person); // false

2. 未处理返回值：若构造函数返回对象，错误实现会丢失返回值。

   // 错误示例
   function wrongNew(Constructor, ...args) {
     const obj = Object.create(Constructor.prototype);
     Constructor.apply(obj, args);
     return obj; // 忽略构造函数返回值
   }
   function RetObj() { return { data: 1 }; }
   const ret = wrongNew(RetObj);
   console.log(ret.data); // undefined（应输出1）

3. 参数传递错误：未使用剩余参数（...args）会导致参数丢失。

   // 错误示例
   function argsNew(Constructor, arg1, arg2) {
     const obj = Object.create(Constructor.prototype);
     Constructor.apply(obj, [arg1, arg2]); // 硬编码参数
     return obj;
   }
   // 若调用argsNew(Person, 'Dave', 'Engineer')，需手动修改函数签名

七、总结与扩展思考

手写myNew不仅是面试高频题，更是理解JavaScript对象模型的关键。通过实现，我们掌握了：

• 原型链的动态链接。
• this绑定的底层机制。
• 函数返回值的隐式规则。

进一步思考：

1. ES6+的替代方案：使用class和extends是否更清晰？
2. TypeScript中的实现：如何为myNew添加类型注解？
3. 性能优化：能否通过缓存原型对象提升速度？

掌握new的手动实现后，你将更自信地处理继承、混入（Mixin）等高级特性，为编写健壮的JavaScript代码打下坚实基础。