JavaScript中new关键字的作用

技术背景

JavaScript是一种动态的、支持面向对象编程范式的编程语言，它是基于原型的，而非基于类。在JavaScript里，new关键字用于从构造函数创建对象实例，这在实现对象的创建和继承方面发挥着关键作用。

实现步骤

使用new关键字调用构造函数时，会按以下步骤执行：

1. 创建新对象：创建一个全新的对象，其类型为object。
2. 设置原型：将新对象的内部[[prototype]]（即__proto__）属性设置为构造函数的prototype对象。
3. 绑定this：使this变量指向新创建的对象。
4. 执行构造函数：执行构造函数，每当提到this时，都使用新创建的对象。
5. 返回对象：返回新创建的对象，除非构造函数返回一个非null的对象引用，此时返回该对象引用。

核心代码

示例1：基本的构造函数使用

function Dog (age) {
    this.age = age;
}

const doggie = new Dog(12);
console.log(doggie);
console.log(Object.getPrototypeOf(doggie) === Dog.prototype); // true

示例2：模拟new关键字的实现

function myNew(constructor, ...args) {
    const obj = {};
    Object.setPrototypeOf(obj, constructor.prototype);
    
    const returnedVal = constructor.apply(obj, args);
    
    if (
        typeof returnedVal === 'function' 
        || (typeof returnedVal === 'object' && returnedVal !== null)
    ) {
        return returnedVal;
    }
    return obj;
}

最佳实践

构造函数命名规范

构造函数的名称通常使用大写字母开头，以提示开发者需要使用new关键字调用。

function Person(name) {
    this.name = name;
}

const john = new Person('John');

使用原型添加共享属性和方法

可以通过构造函数的prototype属性为所有实例添加共享的属性和方法。

Person.prototype.getName = function() {
    return this.name;
};

console.log(john.getName()); // 输出: John

常见问题

不使用new关键字调用构造函数

如果不使用new关键字调用构造函数，this将指向全局对象（在浏览器中是window对象），这可能会导致意外的结果。

function Foo() {
    this.A = 1;
    this.B = 2;
}

Foo();
console.log(window.A); // 输出: 1

构造函数中显式返回对象

如果构造函数中显式返回一个非null的对象，new表达式将返回该对象，而不是新创建的对象。

var Foo = function() {
    this.A = 1;
    this.B = 2;
    return {C: 20, D: 30};
};

var bar = new Foo();
console.log(bar.C); // 输出: 20
console.log(bar.A); // 输出: undefined