JavaScript 构造函数与 new 关键字

1. 构造函数是什么？

构造函数是 JavaScript 中一种专门用来创建对象的函数。它的主要作用是初始化一个对象的属性和方法。构造函数和普通函数不同的地方在于，构造函数通常需要与 new 关键字配合使用。

1.1 为什么需要构造函数？

我们知道，在 JavaScript 中，创建对象有很多种方式，其中一种是直接使用对象字面量：


// 使用对象字面量创建对象
let person1 = {
    name: "Alice",
    age: 25,
    sayHello: function() {
        alert("Hello, my name is " + this.name);
    }
};

这种方式适用于创建单个对象，但如果我们需要创建多个类似的对象，每次都手动定义就显得很麻烦。这时，构造函数可以帮助我们更高效地创建多个对象。

2. new 关键字的作用

在 JavaScript 中，new 关键字的作用是创建一个新的对象实例，并将构造函数中的 this 绑定到这个新创建的对象上。

2.1 使用 new 创建对象

接下来我们看看如何使用 new 关键字来创建对象：


// 定义一个构造函数
function Person(name, age) {
    this.name = name;  // 绑定属性到新对象
    this.age = age;
    this.sayHello = function() {
        alert("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
    };
}

// 使用 new 关键字创建 Person 对象
let person2 = new Person("Bob", 30);
person2.sayHello();  // 输出: Hello, my name is Bob and I am 30 years old.

在上面的代码中，new 关键字会为 Person 构造函数创建一个新对象，并将其属性 name 和 age 初始化。

3. 构造函数的工作原理

当我们使用 new 关键字调用构造函数时，它实际上会执行以下步骤：

4. 构造函数的命名约定

在 JavaScript 中，构造函数的名称通常首字母要大写。这是一个编程约定，表示该函数是一个构造函数，应与 new 关键字一起使用：


// 正确的命名方式
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 不推荐的命名方式（首字母小写）
function person(name, age) {
    this.name = name;
    this.age = age;
}

虽然 JavaScript 并不强制要求构造函数首字母大写，但遵循这一约定有助于代码的可读性和维护。

5. this 的含义

在构造函数中，this 关键字指向的是当前创建的对象。在每次调用构造函数时，this 都会绑定到不同的实例上。


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

let person1 = new Person("Alice", 25);
let person2 = new Person("Bob", 30);

alert(person1.name);  // 输出: Alice
alert(person2.name);  // 输出: Bob

在上述代码中，person1 和 person2 是两个独立的对象，this 在不同的实例中指向不同的对象。

6. 忘记使用 new 的问题

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


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

// 忘记使用 new
let person = Person("Charlie", 28);  // 没有使用 new

alert(window.name);  // 输出: Charlie
alert(person);  // 输出: undefined

在这个例子中，由于忘记使用 new 关键字，this 指向了全局对象 window，导致全局对象的 name 属性被错误修改。

7. 小结