new的实现 js

new 的实现原理

在 JavaScript 中，new 操作符用于创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型的实例。其内部实现原理可以分为以下几个关键步骤：

1. 创建一个空对象
   首先创建一个全新的空对象，这个对象的 __proto__ 属性会被设置为构造函数的 prototype 属性。

2. 绑定 this 并执行构造函数
   将新创建的对象作为 this 上下文，执行构造函数。构造函数内部的 this 会指向新创建的对象。

3. 处理返回值
   如果构造函数返回一个对象（包括数组、函数等），则 new 表达式的结果是这个返回的对象。如果构造函数没有显式返回对象，则返回新创建的对象。

手动实现 new

以下是一个手动实现 new 操作的函数，模拟其行为：

function myNew(constructor, ...args) {
  // 创建一个新对象，并将其原型指向构造函数的 prototype
  const obj = Object.create(constructor.prototype);

  // 调用构造函数，绑定 this 为新对象
  const result = constructor.apply(obj, args);

  // 如果构造函数返回一个对象，则返回该对象；否则返回新创建的对象
  return result instanceof Object ? result : obj;
}

使用示例

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

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

// 使用原生 new
const person1 = new Person('Alice', 25);
person1.sayHello(); // 输出: Hello, my name is Alice

// 使用手动实现的 myNew
const person2 = myNew(Person, 'Bob', 30);
person2.sayHello(); // 输出: Hello, my name is Bob

关键点说明

• Object.create 的作用
  用于创建一个新对象，并将其 __proto__ 指向构造函数的 prototype 属性，确保实例可以访问原型上的方法。

• 构造函数的返回值
  如果构造函数返回非对象值（如原始类型或未显式返回），则忽略返回值并返回新创建的对象。如果返回对象，则以该对象为结果。

边界情况处理

如果构造函数本身没有 prototype 属性（如箭头函数），则手动实现的 myNew 会抛出错误，因为 Object.create(null) 无法继承原型方法。实际使用时应确保传入的构造函数是有效的。

const ArrowFunc = () => {};
const obj = myNew(ArrowFunc); // 抛出错误，因为箭头函数没有 prototype