JS 中 new 关键字的作用与模拟实现

前端

2023-11-26 04:57:27

前言

对于前端开发者而言，new 是十分常见的操作，在互联网大厂的面试中，有时还会要求手写实现 new。本文将深入探究 new 到底做了什么，并指导你模拟实现它。

new 的原理

概念

new 是 JavaScript 中的一个关键字，用于创建一个新对象的实例。它接收一个函数（构造函数）作为参数，并返回新创建的对象。

过程

new 关键字执行以下操作：

创建新对象： 创建一个新对象，其原型指向构造函数的 prototype 属性。
绑定 this： 将新对象的 this 关键字绑定到构造函数。
执行构造函数： 调用构造函数，传递给定的参数。构造函数负责初始化新对象。
返回新对象： 返回新创建的对象。如果构造函数显式返回一个对象，则返回该对象，否则返回步骤 1 中创建的对象。

模拟实现

要模拟实现 new，我们需要手动完成上述步骤：

function myNew(constructor, ...args) {
  // 创建新对象
  const obj = Object.create(constructor.prototype);

  // 绑定 this
  const boundConstructor = constructor.bind(obj);

  // 执行构造函数
  boundConstructor(...args);

  // 返回新对象
  return obj;
}

示例

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

const person1 = new Person("John", 30);
const person2 = myNew(Person, "Jane", 25);

console.log(person1.name, person1.age); // 输出：John 30
console.log(person2.name, person2.age); // 输出：Jane 25