新视野下的 JS new 运算符

2023-12-27 06:32:23

前言

在 JavaScript 中，new 运算符是创建对象的一个基本操作，它的作用是调用构造函数并返回一个新的对象。该运算符在 JavaScript 中的应用非常广泛，无论是创建原生对象还是自定义对象，new 运算符都发挥着至关重要的作用。

为了更好地理解 new 运算符的工作原理，本文将从头开始模拟实现一个简化的 new 运算符，并结合具体的代码测试来深入剖析其内部机制。同时，我们还将对模拟实现的 new 运算符进行优缺点分析，以便更好地掌握 new 运算符的本质和使用方法。

模拟实现 JS `new` 运算符

为了模拟实现 new 运算符，我们需要遵循其基本的工作原理：

创建一个空对象。
将构造函数的 prototype 属性赋给该对象的 __proto__ 属性。
将构造函数的 this 上下文指向该对象。
执行构造函数，并传递必要的参数。
返回新创建的对象。

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

  // 2. 将构造函数的 prototype 属性赋给该对象的 __proto__ 属性
  obj.__proto__ = constructor.prototype;

  // 3. 将构造函数的 this 上下文指向该对象
  const result = constructor.apply(obj, args);

  // 4. 执行构造函数，并传递必要的参数
  // 如果构造函数没有返回对象，则返回新创建的对象

  return (typeof result === 'object' && result !== null) ? result : obj;
}

代码测试

为了验证模拟实现的 new 运算符是否正常工作，我们对其进行一些代码测试。

测试 1：创建原生对象

const obj = myNew(Date);
console.log(obj instanceof Date); // true

测试 2：创建自定义对象

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

const person = myNew(Person, 'John', 25);
console.log(person instanceof Person); // true
console.log(person.name); // John
console.log(person.age); // 25

测试 3：构造函数返回对象

function MyClass() {
  return {
    name: 'MyClass',
    age: 10
  };
}

const instance = myNew(MyClass);
console.log(instance instanceof MyClass); // false
console.log(instance.name); // MyClass
console.log(instance.age); // 10