JS手动实现new操作符的原理详解

本文深入剖析了 JavaScript 中 new 操作符的底层执行机制，并手把手带你用四步逻辑（创建原型继承对象、绑定并执行构造函数、正确处理返回值）实现一个功能完备的 myNew 函数，不仅揭示了 new 背后“对象创建—原型链接—this 绑定—返回控制”的完整流程，还通过可运行代码帮你彻底掌握构造函数实例化的本质，是理解 JS 面向对象和原型链不可错过的实践指南。

要手动实现 JavaScript 中 new 操作符的底层逻辑，核心是模拟它在创建实例对象时的四步行为：创建空对象、绑定原型、执行构造函数、返回正确结果。

1. 创建一个继承自构造函数 prototype 的新对象

这一步对应 new 内部的「创建空对象并设置其 [[Prototype]]」。我们用 Object.create() 来显式建立原型链，确保新对象能访问构造函数原型上的方法和属性。

• 不能直接用 {}，否则原型链断开
• 必须传入 constructor.prototype，而不是 constructor

2. 将构造函数的 this 绑定到新对象并执行

使用 apply（或 call）把构造函数的执行上下文设为刚创建的对象，并传入用户提供的参数。这是实现“初始化实例属性”的关键。

• 需将类数组的 arguments 转为真实数组再剔除第一个参数（即构造函数本身）
• 若构造函数显式返回对象，则后续步骤需尊重该返回值

3. 处理构造函数的返回值

new 的特殊规则是：如果构造函数返回的是对象（含数组、函数、正则等引用类型），就直接返回它；否则才返回新创建的对象。手动实现必须判断返回值类型：

• 用 typeof result === 'object' && result !== null 判断是否为对象
• 注意 null 是 typeof 为 'object' 的例外，必须额外排除

4. 完整可运行的手动 new 实现

综合以上逻辑，一个简洁可靠的 myNew 函数如下：

function myNew(constructor, ...args) {
  const obj = Object.create(constructor.prototype);
  const result = constructor.apply(obj, args);
  return (typeof result === 'object' && result !== null) ? result : obj;
}

你可以用它替代原生 new，比如 myNew(Date, '2023-01-01') 或配合自定义构造函数测试原型链和实例属性是否正常工作。

本篇关于《JS手动实现new操作符的原理详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！