手把手教你手撸 JS 中的 new

前言

作为一名 JavaScript 开发者，掌握 new 的原理至关重要。它不仅仅是一个创建新对象的方法，更是深入理解 JavaScript 运行机制的基石。今天，我们将共同踏上手撸 JS 中的 new 之旅，从原理解析到代码实现，带你领略 new 关键字背后的奥秘。

new 关键字原理

在 JavaScript 中，new 关键字本质上是一种语法糖，它帮助我们方便地创建一个新对象并执行构造函数。其内部过程可以概括为以下几步：

1. 创建新对象： 使用 new 关键字创建了一个新的空对象，该对象继承自构造函数的原型。
2. 设置 this 指针： 将新对象的 this 指针指向创建的空对象。
3. 执行构造函数： 使用 this 指针作为参数，执行构造函数，对新对象进行初始化。
4. 返回新对象： 构造函数执行完成后，将新对象返回给 new 表达式。

手撸 new 关键字实现

有了原理基础，我们就可以着手自己实现一个简易版的 new 关键字。以下为具体步骤：

1. 创建空对象：

   function newObj(constructor) {
     return Object.create(constructor.prototype);
   }
   

2. 设置 this 指针：

   function newObj(constructor, ...args) {
     const obj = Object.create(constructor.prototype);
     constructor.apply(obj, args);
     return obj;
   }
   

3. 执行构造函数：

   function newObj(constructor, ...args) {
     const obj = Object.create(constructor.prototype);
     constructor.call(obj, ...args);
     return obj;
   }
   

使用示例

function Person(name) {
  this.name = name;
}

const john = newObj(Person, "John Doe");
console.log(john); // { name: 'John Doe' }

总结

通过手撸 new 关键字，我们不仅加深了对 JavaScript 运行机制的理解，也掌握了一项实用的技能。无论是面试还是实际开发中，都能助我们一臂之力。手撸代码的过程既能检验我们的理解程度，也能启发我们对语言本质的思考。

进一步思考

• new 关键字的另一种实现方式是什么？
• new 关键字与 Object.create() 方法的区别是什么？
• 如何通过 new 关键字实现类继承？

欢迎在评论区分享你的见解和思考，共同探索 JavaScript 的奥妙。