从零理解 JS 的 new 操作符**

前端

2023-09-27 05:02:27

各位程序员朋友们，大家好！

今天，我们将在本次博文中深入探究 JavaScript 中至关重要的 new 操作符。尽管许多开发者可能已经习惯使用它，但深入了解其内部机制无疑大有裨益。我们将探讨 new 操作符的原理、用途以及如何模拟它的实现。

什么是 new 操作符？

new 操作符是一种用于创建 JavaScript 对象的语法结构。它以一种特殊的方式执行以下操作：

创建新对象： new 首先创建一个新对象，该对象是其指定构造函数类型的实例。
执行构造函数： 接下来，它调用指定的构造函数，并将 new 表达式的参数作为参数传递给该构造函数。
绑定 this： new 操作符将构造函数的 this 绑定到新创建的对象上，从而允许构造函数访问并修改该对象。
返回对象： 最后，new 返回新创建的对象。

为什么使用 new 操作符？

new 操作符在 JavaScript 中非常有用，因为它提供了以下好处：

对象初始化： 它允许我们使用构造函数来初始化对象，以便在创建时执行特定操作。
原型继承： new 操作符创建的对象将继承其构造函数的原型，从而访问原型链上的属性和方法。
this 绑定： 通过将 this 绑定到新对象，我们可以轻松地在构造函数中访问和修改该对象。

模拟 new 操作符

我们可以使用以下步骤模拟 new 操作符的实现：

function myNew(constructor, ...args) {
  // 1. 创建新对象
  const obj = {};

  // 2. 绑定 this
  obj.__proto__ = constructor.prototype;

  // 3. 执行构造函数
  constructor.apply(obj, args);

  // 4. 返回新对象
  return obj;
}

在上面的模拟实现中：

myNew() 函数接收一个构造函数和一组参数。
它创建一个新对象 obj 并将其 proto 属性设置为构造函数的原型。
它使用 apply() 方法将构造函数绑定到 obj ，并使用提供的参数调用它。
最后，它返回新创建的对象 obj 。

示例

让我们使用我们的模拟 new 操作符创建一个 Person 对象：

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

const person = myNew(Person, "John", 30);

console.log(person); // 输出：Person { name: 'John', age: 30 }