掌握构造函数概念以及创建、调用与使用

在 JavaScript 中，构造函数是创建对象的特殊函数，它提供了一种基于模板创建对象的机制。通过构造函数，可以快速创建多个具有相同属性和方法的对象，是面向对象编程的基础。

1. 构造函数概述

构造函数是 JavaScript 中用于创建对象的一种特殊函数。通过构造函数创建的对象，会继承构造函数的属性和方法。构造函数的命名通常以大写字母开头，这是一种约定。

1.1 构造函数的基本原理

构造函数是一个普通的 JavaScript 函数，通过 new 操作符调用。
当调用构造函数时，this 指向一个新的对象，该对象会继承构造函数中的属性和方法。
如果没有显式返回一个对象，构造函数会自动返回 this。

2. 构造函数的创建

2.1 创建一个简单的构造函数

function Person(name, age) {
    this.name = name;  // 将传入的 name 参数赋值给当前对象的 name 属性
    this.age = age;    // 将传入的 age 参数赋值给当前对象的 age 属性
    this.sayHello = function() {  // 定义一个方法用于输出问候信息
        console.log(`你好，我是 ${this.name}，今年 ${this.age} 岁`);
    };
}

// 使用构造函数创建一个新的对象
let person1 = new Person("小明", 25);
person1.sayHello();  // 输出：你好，我是 小明，今年 25 岁

中文注释：

这里定义了一个 Person 构造函数，它有两个属性 name 和 age，以及一个方法 sayHello 用于打印问候信息。
使用 new Person("小明", 25) 创建了一个新的对象 person1，并调用了该对象的 sayHello 方法。

2.2 构造函数中的 `this`

function Car(model, year) {
    this.model = model;  // 设置汽车的型号
    this.year = year;    // 设置汽车的生产年份
    this.displayInfo = function() {  // 设置一个方法用于显示汽车信息
        console.log(`这辆车是 ${this.year} 年的 ${this.model}`);
    };
}

let car1 = new Car("宝马", 2020);  // 创建一个新车对象
car1.displayInfo();  // 输出：这辆车是 2020 年的 宝马

中文注释：

在构造函数中，this 是指向新创建的对象。在 Car 构造函数中，this.model 和 this.year 被设置为传入的值。
使用 new Car("宝马", 2020) 创建了 car1 对象，并调用了它的 displayInfo 方法。

3. 构造函数的调用与使用

3.1 使用 `new` 调用构造函数

构造函数必须使用 new 操作符来调用，这样才能创建新的对象。如果不使用 new，构造函数会返回 undefined。

function Animal(name, sound) {
    this.name = name;
    this.sound = sound;
    this.makeSound = function() {
        console.log(`${this.name} 发出了 ${this.sound} 的声音`);
    };
}

let dog = new Animal("狗", "汪汪");
dog.makeSound();  // 输出：狗 发出了 汪汪 的声音

中文注释：

通过 new Animal("狗", "汪汪") 创建了 dog 对象，并调用了它的 makeSound 方法。

3.2 没有 `new` 的调用方式（错误示范）

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

let person2 = Person("小华", 30);  // 没有使用 new 操作符
console.log(person2);  // 输出：undefined

中文注释：

如果不使用 new 调用构造函数，this 就不会指向一个新的对象，因此 person2 会是 undefined。

4. 构造函数与原型链

在 JavaScript 中，构造函数创建的对象会继承构造函数的原型上的属性和方法。

4.1 通过原型共享方法

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

// 在构造函数的原型上定义方法
Animal.prototype.sayHello = function() {
    console.log(`你好，我是 ${this.name}`);
};

let cat = new Animal("猫");
cat.sayHello();  // 输出：你好，我是 猫

中文注释：

使用 Animal.prototype.sayHello 将 sayHello 方法添加到 Animal 的原型上，这样所有 Animal 实例都可以共享这个方法。
创建 cat 对象后，通过 cat.sayHello() 调用原型方法。

4.2 构造函数与原型链的继承

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

Animal.prototype.sayHello = function() {
    console.log(`你好，我是 ${this.name}`);
};

function Dog(name, breed) {
    Animal.call(this, name);  // 继承 Animal 构造函数的属性
    this.breed = breed;
}

// 设置 Dog 的原型为 Animal 的实例
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.sayBreed = function() {
    console.log(`我是 ${this.breed} 品种`);
};

let dog = new Dog("旺财", "中华田园犬");
dog.sayHello();  // 输出：你好，我是 旺财
dog.sayBreed();  // 输出：我是 中华田园犬 品种

中文注释：

通过 Animal.call(this, name) 实现了 Dog 继承 Animal 的属性。
使用 Object.create(Animal.prototype) 设置 Dog 的原型为 Animal 的实例，从而继承了 sayHello 方法。
dog 对象继承了 Animal 的 sayHello 方法，并新增了 sayBreed 方法。