探究JavaScript中的new：两种实现方式分析

"这篇文档探讨了JavaScript中使用`new`操作符创建对象的两种实现方式，以及它们之间的差异。文章提到了`new`操作符执行的三个基本步骤，并提供了两个自定义实现`new`功能的函数示例：`Mynew`和`Mynew_2`。" 在JavaScript中，`new`操作符被用来创建一个新的对象实例，并将其与一个构造函数关联。通常的理解是，`new`执行以下三个主要步骤： 1. 创建一个新对象，并将该对象的`__proto__`（或`[[Prototype]]`）链接到构造函数的`prototype`对象。 2. 将这个新对象作为上下文（即`this`关键字）传递给构造函数，以便在构造函数内部为新对象添加属性和方法。 3. 如果构造函数返回了一个对象，那么`new`操作符会返回这个对象；否则，返回新创建的对象。 文档中给出了两个实现`new`操作的函数示例： 1. `Mynew`函数： ```javascript function Mynew(parent, ...rest) { let obj = {}; obj.__proto__ = parent.prototype; let res = parent.apply(obj, rest); return typeof res == "object" ? res : obj; } ``` 这个实现首先创建一个空对象`obj`，然后设置其`__proto__`为`parent.prototype`，接着通过`apply`调用构造函数`parent`，并将新对象作为`this`传递。如果构造函数返回一个对象，`Mynew`会返回这个对象，否则返回`obj`。 2. `Mynew_2`函数： ```javascript function Mynew_2(parent, rest) { let child = Object.create(parent.prototype); let result = parent.apply(child, rest); return typeof result == "object" ? result : child; } ``` 这个实现使用`Object.create`来创建一个新对象，使其`[[Prototype]]`链接到`parent.prototype`，然后同样调用构造函数。这里的区别在于`Object.create`创建的对象不会像直接创建的`{}`那样继承`Object.prototype`的方法和属性。 文档还讨论了`Object.create`的一个特性：直接使用`Object.create(Best1)`和`Object.create(Best1.prototype)`创建的对象在访问`Best1`中的属性时的区别。例如： ```javascript var Best1 = function() { this.a = 2; } var o1 = Object.create(Best1); var o2 = Object.create(Best1.prototype); console.log(o1.a); // undefined console.log(o2.a); // undefined ``` 在这个例子中，`o1`和`o2`都无法直接访问`Best1`中的`a`属性，因为`Object.create`只创建了一个新的对象，但没有调用构造函数来初始化`this`。这展示了`new`操作符的重要性和`Object.create`的不同之处。 另一段代码展示了当构造函数修改`prototype`时的情况： ```javascript var Best = function() { this.a = 2; } Best.prototype.a = 3; var o1 = Object.create(Best); var o2 = Object.create(Best.prototype); console.log(o1.a); // undefined console.log(o2.a); // 3 ``` 在这个例子中，`o2`可以通过`[[Prototype]]`链访问到`Best.prototype`上的`a`属性，而`o1`仍然无法访问。 这篇文章深入探讨了`new`操作符背后的原理，以及如何通过自定义函数来模拟`new`的行为。同时，它也揭示了`Object.create`和直接创建对象的区别，强调了理解JavaScript原型链和构造函数的重要性。