当前位置：首页 > JavaScript

new的实现 js

2026-03-15 23:35:50JavaScript

new 操作符的实现原理

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

new的实现 js

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

手动实现 new 操作符

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

new的实现 js

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 person1 = new Person('Alice', 25);
person1.greet(); // 输出: Hello, my name is Alice

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

注意事项

当构造函数有返回值时，new 操作符的行为会有变化：

如果返回值是一个对象，则 new 操作符会返回该对象而不是新创建的对象
如果返回值是原始值（如数字、字符串、布尔值等），则会被忽略，仍然返回新创建的对象

function Test1() {
    this.a = 1;
    return { b: 2 }; // 返回对象
}

function Test2() {
    this.a = 1;
    return 123; // 返回原始值
}

const t1 = new Test1();
console.log(t1); // 输出: { b: 2 }

const t2 = new Test2();
console.log(t2); // 输出: Test2 { a: 1 }