当前位置：首页 > JavaScript

js 实现new

2026-01-31 20:26:47JavaScript

new 操作符的原理

在 JavaScript 中，new 操作符用于创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new 操作符主要执行以下步骤：

创建一个空的简单 JavaScript 对象（即 {}）。
将这个新对象的 __proto__ 属性指向构造函数的 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.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

处理构造函数返回值

如果构造函数显式返回一个对象，new 操作符会返回该对象而不是新创建的对象。自定义实现也需要考虑这一点：

function Car(model) {
    this.model = model;
    return { custom: true }; // 显式返回一个对象
}

const car1 = new Car('Tesla');
console.log(car1); // 输出: { custom: true }

const car2 = myNew(Car, 'BMW');
console.log(car2); // 输出: { custom: true }

边界情况

如果构造函数返回非对象值（如数字、字符串等），new 操作符会忽略返回值并返回新创建的对象。自定义实现也遵循这一规则：

js 实现new

function Bike(brand) {
    this.brand = brand;
    return 'This is a bike'; // 返回非对象值
}

const bike1 = new Bike('Yamaha');
console.log(bike1); // 输出: Bike { brand: 'Yamaha' }

const bike2 = myNew(Bike, 'Honda');
console.log(bike2); // 输出: Bike { brand: 'Honda' }