一文秒懂JavaScript构造函数、实例、原型对象以及原型链

JavaScript构造函数、实例、原型对象以及原型链

在JavaScript中，每个对象都有一个原型对象（prototype），也可以称之为“原型”。原型是一个对象，其中包含该对象的属性和方法，并且可以由其相关的对象实例所继承。下面我们来详细讲解JavaScript的构造函数、实例、原型对象以及原型链。

构造函数

构造函数是用来创建对象的函数。JavaScript中的构造函数在命名时通常使用首字母大写的方式，并且要使用new关键字来创建一个对象。

下面是一个创建Person对象的构造函数例子：

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

在上面的例子中，Person函数接受两个参数name和age，并使用this关键字为实例化的对象设置这两个属性。

实例

使用构造函数创建出来的对象被称为实例（instance），它是该构造函数的一个对象。

使用上述Person构造函数创建一个对象实例的方法如下所示：

let person1 = new Person('张三', 18);

上面的代码通过new关键字调用Person函数创建了一个对象，该对象被赋值给变量person1。

原型

上述例子中的Person构造函数和person1对象实例都有一个叫做原型（prototype）的属性。原型对象包含了实例所继承的属性和方法。

可以如下所示修改上述代码以访问Person的原型：

console.log(Person.prototype);

上述代码会输出一个对象，其中包含name和age两个属性。

原型链

每个JavaScript对象都有一个指向它的原型的内部链接。这个内部链接被称为原型链（prototype chain）。当我们想要访问某个对象的属性或方法时，如果该对象本身没有定义该属性或方法，JavaScript解析器就会继续在该对象的原型对象（及其原型对象的原型对象，依次类推）上查找该属性或方法。

下面是一个完整的代码示例：

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

let person1 = new Person('张三', 18);
console.log(person1.name); // 输出：张三

console.log(Person.prototype); // 输出：{ constructor: [Function: Person] }

Person.prototype.salary = '10000';

console.log(person1.salary); // 输出：10000

在上述代码示例中，Person.prototype对象的salary属性被设置为10000。因此，person1实例的salary属性也被设置为10000，因为它继承了Person.prototype的属性。

这个例子中展示了一个简单的原型链。当我们尝试访问person1的salary属性时，如果person1对象本身没有定义该属性，JavaScript解析器会查找Person.prototype对象是否拥有该属性。如果Person.prototype对象本身没有该属性，则JavaScript解析器会继续查找Person.prototype对象的原型对象，也就是Object.prototype对象，直到找到为止。

原型链的概念在面向对象编程中非常重要，它是JavaScript中实现继承的主要方式之一。

示例说明

示例1

function Car(model, year, miles) {
  this.model = model;
  this.year = year;
  this.miles = miles;
}

Car.prototype.toString = function() {
  return this.model + ' has done ' + this.miles + ' miles';
};

let civic = new Car('Honda Civic', 2009, 20000);
console.log(civic.toString());

在这个例子中，我们创建了一个汽车对象的构造函数Car，用于创建汽车对象。我们使用了new关键字来从构造函数中创建实例。在创建实例后，我们通过给原型对象Car.prototype添加一个toString方法，来为汽车对象的实例添加一个打印信息的方法。最后，我们通过调用civic.toString()来打印汽车信息。

示例2

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

Animal.prototype.sound = function() {
  console.log('发出声音');
};

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.sound = function() {
  console.log('汪汪叫');
};

let myDog = new Dog('小狗', '哈士奇');
myDog.sound();

在这个例子中，我们定义了Dog构造函数，用于创建狗对象。该构造函数继承了Animal构造函数的name属性，并增加了自己的breed属性。我们通过Animal.call(this, name)这一行代码，在Dog构造函数中调用了Animal构造函数，以便将name属性添加到Dog对象上。

我们还在Dog构造函数中添加了自己的Dog.prototype.sound方法。这个方法覆盖了从Animal.prototype.sound继承来的方法，并改为输出汪汪叫。

最后，我们通过调用myDog.sound()来测试Dog对象是否能够正确地发出声音。

总结

JavaScript中的构造函数、实例、原型对象以及原型链是实现面向对象编程的重要概念。通过构造函数可以创建对象的蓝图，而通过原型对象可以添加对象的属性和方法。对象的原型链则决定了对象能够继承自身及其原型链上的属性和方法。熟练掌握这些概念有助于我们在JavaScript中更好地编写对象-oriented的代码。