当前位置：首页 > JavaScript

js new实现

2026-04-07 05:01:30JavaScript

new 操作符的实现原理

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

创建一个新的空对象
将这个新对象的 __proto__ 属性指向构造函数的 prototype 属性
将构造函数的 this 绑定到这个新对象上并执行构造函数
如果构造函数返回一个对象，则返回该对象；否则返回新创建的对象

手动实现 new 操作符

以下是一个模拟 new 操作符功能的函数实现：

function myNew(constructor, ...args) {
  // 创建一个新对象，继承构造函数的 prototype 属性
  const obj = Object.create(constructor.prototype);

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

  // 如果构造函数返回对象则返回该对象，否则返回新对象
  return (typeof result === 'object' && result !== null) ? result : obj;
}

使用示例

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

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

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

// 使用自定义实现
const person2 = myNew(Person, 'Bob', 30);
person2.greet(); // Hello, my name is Bob

特殊情况处理

构造函数返回原始值：会被忽略，仍然返回新创建的对象
构造函数返回对象：会直接返回该对象，而不是新创建的对象
箭头函数作为构造函数：会抛出错误，因为箭头函数没有自己的 this

边界情况测试

// 测试构造函数返回对象
function Car(model) {
  this.model = model;
  return { custom: true }; // 返回一个对象
}

const car = myNew(Car, 'Tesla');
console.log(car); // { custom: true } 而不是 Car 实例

// 测试构造函数返回原始值
function Bike() {
  return 'string'; // 返回原始值
}

const bike = myNew(Bike);
console.log(bike instanceof Bike); // true