当前位置：首页 > JavaScript

js new 实现

2026-04-06 23:49:08JavaScript

new 操作符的实现原理

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

js new 实现

创建一个空的简单 JavaScript 对象（即 {}）
将新对象的 __proto__ 属性指向构造函数的 prototype 属性
将构造函数内部的 this 绑定到这个新对象
执行构造函数内部的代码（为新对象添加属性）
如果构造函数没有显式返回对象，则返回这个新对象

手动实现 new

可以通过以下代码模拟 new 操作符的功能：

js 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 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

关键注意事项

构造函数如果有返回值，且返回值是对象，则 new 操作符会返回该对象而不是新创建的对象
如果返回值是原始类型，则会被忽略，仍然返回新创建的对象
新对象的原型链会正确连接到构造函数的 prototype 属性上
ES6 的 class 语法也可以使用 new 操作符，其行为与函数构造函数一致

边界情况处理

更完整的实现可能需要考虑以下边界情况：

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

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

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

    // 处理返回值
    const isObject = result !== null && typeof result === 'object';
    const isFunction = typeof result === 'function';

    return isObject || isFunction ? result : obj;
}

这种实现方式完整模拟了原生 new 操作符的行为，包括各种边界情况的处理。