当前位置：首页 > JavaScript

js实现new

2026-04-06 11:54:19JavaScript

new 操作符的实现原理

在 JavaScript 中，new 操作符用于创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型的实例。实现 new 操作符的功能需要了解其底层工作原理。

当使用 new 操作符调用函数时，会发生以下事情：

创建一个空的简单 JavaScript 对象（即 {}）
将该对象的原型指向构造函数的 prototype 属性
将构造函数内部的 this 绑定到这个新对象
执行构造函数内部的代码
如果构造函数返回非原始值，则返回该值；否则返回创建的对象

自定义实现 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.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

// 使用原生 new
const john = new Person('John', 30);
john.greet(); // Hello, my name is John

// 使用自定义 myNew
const jane = myNew(Person, 'Jane', 25);
jane.greet(); // Hello, my name is Jane

处理构造函数返回值

自定义实现需要考虑构造函数可能返回对象的情况：

function Car(model) {
  this.model = model;
  // 返回一个替代对象
  return { type: 'vehicle' };
}

const car1 = new Car('Toyota');
console.log(car1); // { type: 'vehicle' }

const car2 = myNew(Car, 'Honda');
console.log(car2); // { type: 'vehicle' }

边界情况处理

更健壮的实现需要考虑更多边界情况：

js实现new

function betterNew(constructor, ...args) {
  // 检查 constructor 是否为函数
  if (typeof constructor !== 'function') {
    throw new TypeError('constructor must be a function');
  }

  // 创建对象并设置原型
  const obj = Object.create(constructor.prototype);

  // 调用构造函数
  const result = constructor.apply(obj, args);

  // 处理返回值
  return result && typeof result === 'object' ? result : obj;
}

这个实现更接近原生 new 操作符的行为，包括类型检查和对返回值更精确的处理。