JS中new操作符的底层实现解析

本文深入解析了JavaScript中new操作符的底层执行机制，揭示其背后隐藏的四大关键步骤——创建空对象、绑定原型链、以新对象为this执行构造函数、以及根据返回值类型智能决定最终返回结果；并通过手写可运行的myNew函数，完整复现了原生new的行为逻辑，包括对函数类型校验、Object.create精准设置原型、call调用构造函数及严格区分null与对象返回值等细节，帮助开发者真正理解面向对象创建的本质，摆脱黑盒认知。

new操作符做了什么

调用构造函数时，new 不只是执行函数，它会完成四件事：创建空对象、绑定原型、执行构造函数、返回正确值。模拟的关键就是把这四步用普通函数还原出来。

手动实现new的核心步骤

一个可靠的模拟函数需按顺序处理以下逻辑：

• 检查第一个参数是否为函数：非函数直接抛错，因为new只能用于构造函数
• 创建新对象，并将其__proto__指向构造函数的prototype：这是实现原型继承的核心
• 用call（或apply）以新对象为this执行构造函数：让构造函数内部的this指向该实例
• 判断构造函数返回值：若返回的是对象（含null以外的对象、数组、函数等），就返回它；否则返回新创建的对象

完整可运行的模拟函数

以下是简洁且覆盖边界情况的实现：

function myNew(ctor, ...args) {
  if (typeof ctor !== 'function') {
    throw new TypeError('First argument must be a function');
  }

  const obj = Object.create(ctor.prototype);
  const result = ctor.apply(obj, args);

  return (result !== null && typeof result === 'object') || typeof result === 'function'
    ? result
    : obj;
}

注意：Object.create(ctor.prototype) 比 {} 更准确，它直接设置原型链；返回判断中要排除 null（虽然 typeof null 是 'object'，但 new 规范中 null 不算有效返回对象）。

验证是否符合原生new行为

可以这样测试：

function Person(name) {
  this.name = name;
  return { age: 25 }; // 显式返回对象
}
const p1 = myNew(Person, 'Alice');
console.log(p1.age); // 25 → 返回了构造函数的返回值

function Animal(name) {
  this.name = name;
  return 'dog'; // 返回原始值
}
const a1 = myNew(Animal, 'Buddy');
console.log(a1.name); // 'Buddy' → 忽略字符串返回，返回实例

这些行为与原生 new 完全一致，说明模拟已覆盖关键逻辑。

好了，本文到此结束，带大家了解了《JS中new操作符的底层实现解析》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！