JavaScript原型对象、构造函数和实例对象功能与用法详解

前言

在讲解 JavaScript 原型对象、构造函数和实例对象之前，我们需要先了解几个概念：

• 属性：包括原型对象和实例对象的属性，以及函数对象的属性
• 方法：包括原型对象和实例对象的方法，以及函数对象的方法
• 原型：每个 JavaScript 对象都有一个原型对象，用于继承属性和方法
• 构造函数：用于创建实例对象的函数
• 实例对象：通过构造函数创建出来的对象，可以使用原型对象的属性和方法

原型对象

JavaScript 对象有一个特殊的属性 __proto__，称为原型对象。每个对象都有一个原型对象，除了 null，而原型对象也是对象，因此它也有一个原型对象，一直到 Object.prototype，它是原型链的顶端。

在对象属性或方法查找时，如果对象本身没有该属性或方法，就会自动去它的原型对象中查找。我们常用的原型对象是函数的原型对象，每个函数都有一个原型对象，默认情况下它的 constructor 指向该函数本身。

function Person() {}
Person.prototype.name = "Alice";
Person.prototype.sayHello = function() {
    console.log("Hello, I'm " + this.name + ".");
};

var person = new Person();
person.sayHello();  // Hello, I'm Alice.

在上面的例子中，Person.prototype 是一个原型对象，它有两个属性：name 和 sayHello。Person 通过 new 关键字创建了一个实例对象 person，它继承了 Person.prototype 的所有属性和方法。因此 person 也有 name 和 sayHello 两个属性和方法。

构造函数

构造函数是一种特殊的函数，它被用来创建实例对象。在 JavaScript 中，构造函数与普通函数的区别是通过 new 关键字调用，而普通函数可以直接调用。另外，构造函数一般用大写字母开头。

每个构造函数都有一个 prototype 属性，它是一个原型对象，也是该构造函数创建的所有实例对象的原型对象。在构造函数中定义的属性和方法都会被该构造函数创建的实例对象所继承。

function Person(name, gender) {
    this.name = name;
    this.gender = gender;
}
Person.prototype.sayHello = function() {
    console.log("Hello, I'm " + this.name + ".");
};

var person1 = new Person("Alice", "female");
var person2 = new Person("Bob", "male");
person1.sayHello();  // Hello, I'm Alice.
person2.sayHello();  // Hello, I'm Bob.

在上述例子中，Person 是一个构造函数，它有两个参数 name 和 gender，并且在函数中用 this 关键字定义了两个实例属性。sayHello 是 Person.prototype 的一个方法，因此所有通过 Person 创建的实例对象都可以使用 sayHello 方法。

实例对象

实例对象是通过构造函数 new 关键字创建出来的对象。每个实例对象都有一个 __proto__ 属性，它指向该实例对象所属的构造函数的原型对象。

function Person(name, gender) {
    this.name = name;
    this.gender = gender;
}
Person.prototype.sayHello = function() {
    console.log("Hello, I'm " + this.name + ".");
};

var person1 = new Person("Alice", "female");
var person2 = new Person("Bob", "male");
console.log(person1.__proto__ === Person.prototype);  // true
console.log(person2.__proto__ === Person.prototype);  // true

在上述例子中，person1 和 person2 都是 Person 的实例对象，它们都有一个 __proto__ 属性，指向 Person.prototype。

实例对象所具有的属性和方法，来自于它所属的构造函数的原型对象和实例自身定义的属性和方法。

示例说明

示例一：原型对象属性和方法的继承

function Student(name, grade) {
    this.name = name;
    this.grade = grade;
}
Student.prototype.sayHi = function() {
    console.log(`Hi, my name is ${this.name}, and I'm in grade ${this.grade}.`);
}

function Teacher(name, subject) {
    this.name = name;
    this.subject = subject;
}
Teacher.prototype = new Student();
Teacher.prototype.sayHi = function() {
    console.log(`Hello, my name is ${this.name}, and I teach ${this.subject}.`);
}

var student = new Student("Alice", 5);
var teacher = new Teacher("Bob", "Mathematics");

student.sayHi();  // Hi, my name is Alice, and I'm in grade 5.
teacher.sayHi();  // Hello, my name is Bob, and I teach Mathematics.

在该示例中，Student 是一个构造函数，它有两个属性 name 和 grade，还有一个原型方法 sayHi。Teacher 是从 Student 派生的一个构造函数，它定义了一个属性 subject。

在 Teacher.prototype 中，将它的原型对象设置为 Student.prototype，这样 Teacher 也就继承了 Student 的属性和方法，包括 sayHi 方法。在 Teacher.prototype 中重写了 sayHi 方法，保留了 name 属性，并新增了 subject 属性。

创建了 student 和 teacher 两个实例对象，它们分别使用了 Student.prototype 和 Teacher.prototype 的 sayHi 方法，表现出不同的行为。

示例二：实例对象属性的修改

function Car(brand, price) {
    this.brand = brand;
    this.price = price;
}
Car.prototype.drive = function() {
    console.log(`Driving a ${this.brand} car, priced at ${this.price} dollars.`);
}

var car = new Car("Toyota", 20000);
car.drive();  // Driving a Toyota car, priced at 20000 dollars.

car.brand = "Honda";
car.price = 25000;
car.drive();  // Driving a Honda car, priced at 25000 dollars.

在该示例中，我们定义了一个 Car 构造函数，它有两个属性 brand 和 price，还定义了一个原型方法 drive，用于输出车辆相关信息。

创建了一个实例对象 car，并调用了 drive 方法，输出了车辆的信息。接着，我们通过修改 car 对象的 brand 和 price 属性，再次调用了 drive 方法，显示了修改后的信息。

这个例子展示了实例对象的属性可以修改，并且在调用方法时能够输出更新后的信息。