手动实现 new 操作符：深入理解原型链与构造函数

在 JavaScript 中，new 操作符是一个强大的工具，它让我们能够基于构造函数创建对象实例。但是，你是否想过 new 操作符内部是如何工作的？通过手动实现它，我们可以更深入地理解原型链、构造函数和实例化过程之间的关系。

new 操作符的作用

当我们使用 new 操作符时，它会执行以下步骤：

创建一个空对象
将这个空对象的原型指向构造函数的原型
将新对象作为构造函数的 this 值，调用构造函数
处理构造函数的返回值

让我们来看看如何手动实现这个过程：

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

  // 2. 将空对象的原型指向构造函数的原型
  const instance = Object.create(_constructor.prototype)

  // 3. 将这个新对象作为构造函数的this值，通过apply调用构造函数，传入参数
  const res = _constructor.apply(instance, args)

  // 4. 处理返回值
  // 如果构造函数返回一个简单类型的值，则返回这个值
  // 否则返回新创建的对象

  const isObject = typeof res === 'object' && res !== null
  const isFunction = typeof res === 'function'

  // 如果构造函数返回一个对象或函数，则返回这个对象或函数
  if (isObject || isFunction) {
    return res
  }

  return instance
}

关键步骤解析

1. 创建空对象

传统方式会创建一个字面量对象 {}，但这种方式有一个问题：新创建的对象会继承 Object.prototype 上的所有属性。为了更精确地控制原型链，我们使用 Object.create() 方法。

2. 设置原型链

const instance = Object.create(_constructor.prototype)

这一步是理解原型链的关键。Object.create(_constructor.prototype) 创建一个新对象，并将其 [[Prototype]] 内部属性设置为 _constructor.prototype。

这意味着：

新对象可以访问构造函数原型上的所有方法和属性
形成了完整的原型链：instance → _constructor.prototype → Object.prototype → null

3. 绑定 this 并调用构造函数

const res = _constructor.apply(instance, args)

使用 apply() 方法调用构造函数，并将新创建的对象作为 this 值传入。这样，构造函数内部的 this 就指向了我们新创建的对象实例。

4. 处理返回值

这是很多人容易忽略的细节。JavaScript 的 new 操作符有一个特殊行为：

如果构造函数返回一个对象或函数，则返回该返回值
如果构造函数返回基本类型值（如 undefined、null、数字、字符串、布尔值），则忽略返回值，返回新创建的对象

实际应用示例

让我们通过一个具体的例子来验证我们的实现：

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

Person.prototype.sayHello = function () {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`)
}

// 使用我们手动实现的 new 操作符
const person = myNew(Person, 'John', 20)
person.sayHello() // "Hello, my name is John and I am 20 years old."

// 验证原型链
console.log(person.__proto__ === Person.prototype) // true
console.log(person instanceof Person) // true

原型链的深入理解

原型链的查找机制

当我们访问一个对象的属性时，JavaScript 引擎会：

首先在对象自身查找该属性
如果没找到，则沿着原型链向上查找
直到找到属性或到达原型链的末端（null）

// 原型链查找示例
console.log(person.name) // "John" - 在实例上找到
console.log(person.sayHello) // function - 在原型上找到
console.log(person.toString) // function - 在 Object.prototype 上找到

属性遮蔽（Property Shadowing）

如果实例和原型上有同名的属性，实例上的属性会”遮蔽”原型上的属性：

Person.prototype.greeting = "Hello from prototype"

const person1 = myNew(Person, 'Alice', 25)
console.log(person1.greeting) // "Hello from prototype"

person1.greeting = "Hello from instance"
console.log(person1.greeting) // "Hello from instance"
console.log(person1.__proto__.greeting) // "Hello from prototype"

构造函数返回值的特殊情况

让我们看看构造函数返回不同值类型的情况：

function ConstructorWithObjectReturn() {
  this.prop = 'instance property'
  return { customProp: 'custom value' }
}

function ConstructorWithPrimitiveReturn() {
  this.prop = 'instance property'
  return 'primitive value'
}

function NormalConstructor() {
  this.prop = 'instance property'
}

const obj1 = myNew(ConstructorWithObjectReturn)
console.log(obj1) // { customProp: 'custom value' }
console.log(obj1.prop) // undefined

const obj2 = myNew(ConstructorWithPrimitiveReturn)
console.log(obj2) // ConstructorWithPrimitiveReturn { prop: 'instance property' }
console.log(obj2.prop) // 'instance property'

const obj3 = myNew(NormalConstructor)
console.log(obj3) // NormalConstructor { prop: 'instance property' }

与原生 new 操作符的对比

让我们验证我们的实现是否与原生 new 操作符行为一致：

// 原生 new 操作符
const nativePerson = new Person('Jane', 30)

// 我们的实现
const customPerson = myNew(Person, 'Jane', 30)

// 比较结果
console.log(nativePerson.name === customPerson.name) // true
console.log(nativePerson.age === customPerson.age) // true
console.log(nativePerson.__proto__ === customPerson.__proto__) // true
console.log(nativePerson instanceof Person === customPerson instanceof Person) // true

实际应用场景

手动实现 new 操作符不仅有助于理解 JavaScript 的核心概念，在某些特殊场景下也有实际用途：

1. 学习目的

深入理解原型链机制
掌握 this 绑定的原理
了解对象创建的完整过程

2. 框架开发

在某些框架中可能需要自定义对象创建逻辑
实现特殊的实例化行为

3. 调试和测试

在测试环境中模拟不同的对象创建行为
调试原型链相关的问题

总结

通过手动实现 new 操作符，我们深入理解了：

原型链的建立过程：如何将新对象的原型指向构造函数的原型
this 绑定的机制：如何确保构造函数内部的 this 指向新创建的对象
返回值处理：JavaScript 对构造函数返回值的特殊处理规则
对象创建的完整流程：从空对象到完整实例的每一步

这种理解不仅有助于我们更好地使用 JavaScript，也为深入理解其他面向对象编程概念奠定了基础。原型链是 JavaScript 面向对象编程的核心，掌握它意味着掌握了 JavaScript 对象系统的精髓。

记住，虽然我们手动实现了 new 操作符，但在实际开发中，我们仍然应该使用原生的 new 操作符，因为它经过了优化，性能更好，而且更可靠。手动实现的价值在于帮助我们理解底层原理，而不是替代原生功能。

# 手动实现 new 操作符：深入理解原型链与构造函数