解剖JavaScript的造物主：手写new操作符揭秘对象诞生全流程

解剖JavaScript的造物主：手写new操作符揭秘对象诞生全流程

🌟 从上帝视角看对象创建

在JavaScript的宇宙中，每当使用new关键字时，都会发生一次奇妙的对象创世纪 。本文将通过手写new函数，带你领略JS对象诞生的三大核心法则：

1. 空对象孕育 → 2. 血脉传承 → 3. 灵魂注入

---

一、原生new操作符的创世四部曲

当执行new Person()时，引擎暗中完成以下神圣仪式：

javascript

复制

// 隐藏的造物流程
function _new(constructor, ...args) {
  // ① 开辟纯净空间
  const obj = Object.create(null)
  
  // ② 血脉连接（原型继承）
  obj.__proto__ = constructor.prototype
  
  // ③ 灵魂注入（构造函数初始化）
  const result = constructor.apply(obj, args)
  
  // ④ 决定最终形态
  return typeof result === 'object' ? result : obj
}

---

二、手写实现深度解析

我们通过objectFactory还原造物主权能：

1. 核心代码结构

javascript

复制

function objectFactory() {
  // 取出构造函数（神圣选择）
  const Constructor = [].shift.call(arguments)
  
  // ① 开辟纯净世界
  const obj = new Object()
  
  // ② 血脉传承仪式
  obj.__proto__ = Constructor.prototype
  
  // ③ 灵魂注入仪式
  Constructor.apply(obj, arguments)
  
  return obj
}

2. 关键步骤拆解

1. 参数手术刀
   [].shift.call(arguments) 妙用数组方法处理类数组

   javascript

   复制

   // 类数组转化示例
   function test() {
     console.log([].slice.call(arguments, 1)) // 输出['b','c']
   }
   test('a', 'b', 'c')

2. 血脉连接奥秘

   通过__proto__建立原型链（现代浏览器建议使用Object.setPrototypeOf）

3. 灵魂注入本质

   构造函数中的this被绑定到新对象

---

三、对象创建的终极真相

JS对象系统建立在两大支柱之上：

支柱	作用	代码表现
原型继承	实现方法共享	obj.__proto__ = Fn.prototype
构造函数	初始化实例属性	Fn.call(obj, args)

javascript

复制

// 可视化原型链
awei.__proto__ → Person.prototype → Object.prototype → null

---

四、进阶边界情况处理

完善我们的造物主函数：

1. 处理构造函数返回值

javascript

复制

// 修改返回逻辑
const result = Constructor.apply(obj, arguments)
// 若返回对象则优先采用
return result instanceof Object ? result : obj

2. 安全原型操作

javascript

复制

// 现代浏览器推荐方式
Object.setPrototypeOf(obj, Constructor.prototype)

---

五、创世流程图解

---

六、知识延伸：其他造物方式

创建方式	特点	示例
字面量创建	最快捷的简单对象	const obj = {name:'awei'}
Object.create()	直接指定原型对象	Object.create(proto)
类语法(class)	ES6面向对象语法糖	class Person {...}

---

结语：理解原型链就是掌握JS灵魂

通过手写new操作符，我们揭开了JS对象系统的神秘面纱。这种理解将帮助开发者：

1. 深入理解框架底层机制
2. 编写更优雅的面向对象代码
3. 快速定位原型相关BUG

思考题 ：如果构造函数返回一个基本类型值，new操作符会如何处理？欢迎在评论区分享你的见解！