new 调用 vs 普通函数调用

JavaScript new vs 普通函数调用

new 调用 vs 普通函数调用

深入理解JavaScript中两种函数调用方式的核心差异

new 调用

创建新对象

使用 new 调用函数时，JavaScript 会创建一个新的空对象，这个对象的原型指向构造函数的 prototype 属性。

普通调用

没有新对象

普通函数调用不创建任何新对象，函数中的 this 指向全局对象（非严格模式）或 undefined（严格模式）。

new 调用

this 绑定

函数内部的 this 会自动绑定到新创建的对象上。

普通调用

全局 this 或 undefined

普通调用中，this 指向全局对象（浏览器中是 window），在严格模式下则为 undefined。

new 调用

返回值处理

构造函数通常不显式返回值。如果返回基本类型，会被忽略；如果返回对象，则替换为新对象。

普通调用

直接返回值

普通函数调用直接返回函数的返回值，没有返回值则返回 undefined。

new 操作符的内部执行流程

步骤 1: 创建新对象

创建一个空对象 {}，这个对象的原型指向构造函数的 prototype 属性

步骤 2: 绑定 this

将新创建的对象绑定到构造函数的 this 上

步骤 3: 执行构造函数

执行构造函数内部的代码，通常会通过 this 为新对象添加属性

步骤 4: 处理返回值

如果构造函数返回一个非基本类型值（对象、函数、数组等），则返回该值

否则返回在步骤 1 中创建的新对象

// 自定义 new 实现
function myNew(constructor, ...args) {
    // 1. 创建新对象并设置原型
    const obj = Object.create(constructor.prototype);
    
    // 2. 执行构造函数，并绑定this
    const result = constructor.apply(obj, args);
    
    // 3. 处理返回值
    return (result && typeof result === 'object') ? result : obj;
}

// 使用示例
function Person(name) {
    this.name = name;
}
const p = myNew(Person, 'Alice');
console.log(p.name); // Alice

使用 new 调用函数

构造函数示例

function Person(name, age) {
    // this 指向新创建的对象
    this.name = name;
    this.age = age;
    
    this.introduce = function() {
        return `大家好，我是${this.name}，今年${this.age}岁。`;
    };
    
    // 注意以下不同返回值的区别
    // return undefined; // 默认
    // return 123;       // 基本类型，忽略
    // return { name: '特殊对象' }; // 返回该对象
}

执行 new 调用

结果：

等待执行...

核心特点

• 创建新的对象实例
• this 指向新对象
• 建立与原型（prototype）的连接
• 如果没有返回对象，则自动返回新对象

普通函数调用

普通函数示例

function createPerson(name, age) {
    // 非严格模式下，this 指向全局对象（如 window）
    // 严格模式下，this 为 undefined
    this.name = name; // 危险，可能污染全局！
    this.age = age;
    
    return {
        name: name,
        age: age,
        introduce: function() {
            return `大家好，我是${this.name}，今年${this.age}岁。`;
        }
    };
    
    // 也可以返回其他值：
    // return undefined; // 默认
    // return 123;       // 返回数字
    // return '字符串';  // 返回字符串
}

执行普通调用

结果：

等待执行...

核心特点

• 不创建新对象
• this 指向全局对象（非严格模式）或 undefined（严格模式）
• 没有与构造函数原型的连接
• 直接返回函数体内的返回值

© 2023 JavaScript 执行机制解析 | 使用 new 调用 vs 普通函数调用

说明：普通函数调用中使用 this 可能会污染全局对象，应避免。构造函数应始终使用 new 调用。