JavaScript原型、原型对象、原型链系列详解（二）

(二)、JavaScript原型对象

原型对象

JavaScript 的原型机制是一种非常强大和灵活的面向对象编程概念，它使用一个对象作为另一个对象的模板，从而实现继承。在 JavaScript 中，每个对象都有一个原型对象，它定义了该对象的属性和方法，并且充当着该对象的模板。

原型对象的定义

在 JavaScript 中，我们可以通过使用构造函数来创建一个对象，构造函数中的 this 指向的是当前对象本身。同时，JavaScript 也提供了一种特殊的构造函数，称之为 Object 构造函数，它用来创建一个新的空对象。

当我们使用 Object 构造函数创建一个新的对象时，JavaScript 会自动为该对象创建一个原型对象，该原型对象会包含一些基本的属性和方法，例如 toString()、valueOf() 等。

除了使用 Object 构造函数创建对象之外，我们还可以通过使用原型对象来定义对象的属性和方法。JavaScript 中，每个对象都有一个 proto 属性，它指向该对象的原型对象。通过修改原型对象的属性和方法，我们可以影响到所有继承自该原型对象的对象。

例如，我们可以通过如下方式定义一个构造函数和它的原型对象：

// 定义一个构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 定义 Person 的原型对象
Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name + ', and I am ' + this.age + ' years old.');
};

在上面的例子中，我们定义了一个构造函数 Person，它包含两个属性 name 和 age。同时，我们还定义了一个 sayHello 方法，并将它添加到了 Person 的原型对象中。

原型对象的原理

当我们使用 new 关键字调用构造函数创建一个新的对象时，JavaScript 会自动为该对象创建一个 proto 属性，并将该属性指向构造函数的原型对象。

例如，当我们使用如下代码创建一个 Person 对象时：

var person = new Person('John', 30);

JavaScript 会先创建一个新的空对象，然后将该对象的 proto 属性指向 Person 构造函数的原型对象。接着，JavaScript 会调用 Person 构造函数，并将 this 指向该新创建的对象，最后将 name 和 age 属性添加到该对象中。

当我们调用 person 对象的 sayHello 方法时，JavaScript 首先会查找该对象本身是否具有该方法，由于 person 对象本身并没有该方法，因此 JavaScript 会查找 person 对象的 proto 属性指向的原型对象中是否具有该方法，如果有，就会调用该方法。如果原型对象中也没有该方法，JavaScript 会继续查找原型对象的 proto 属性指向的父原型对象，直到找到该方法为止，或者查找到原型链的末端仍未找到该方法，此时 JavaScript 会抛出一个 TypeError 异常。

在 JavaScript 中，每个对象都有一个原型链，它由一些原型对象构成，这些原型对象通过它们的 proto 属性连接在一起。当我们访问一个对象的属性或方法时，JavaScript 会按照如下的顺序查找该属性或方法：

首先查找该对象本身是否具有该属性或方法； 如果对象本身没有该属性或方法，则查找该对象的原型对象是否具有该属性或方法； 如果原型对象也没有该属性或方法，则查找原型对象的原型对象是否具有该属性或方法； 依次类推，直到找到该属性或方法为止，或者查找到原型链的末端仍未找到该属性或方法，此时 JavaScript 会抛出一个 TypeError 异常。 通过原型链，JavaScript 实现了对象的继承机制，这种继承机制既简单又灵活。当我们修改一个原型对象的属性或方法时，所有继承自该原型对象的对象都会受到影响，从而实现了代码的复用。

例如，我们可以通过如下方式定义一个新的构造函数 Student，并继承自 Person：

// 定义一个新的构造函数 Student
function Student(name, age, major) {
  // 调用父类构造函数，并传入参数
  Person.call(this, name, age);
  this.major = major;
}

// 设置 Student 的原型对象为 Person 的实例，从而继承 Person 的属性和方法
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

// 定义 Student 的新方法
Student.prototype.study = function() {
  console.log('I am studying ' + this.major);
};

在上面的例子中，我们首先使用 call 方法调用了父类 Person 的构造函数，并传入了相应的参数。然后，我们将 Student 的原型对象设置为 Person 的实例，并修改该原型对象的 constructor 属性，以便它指向 Student 构造函数。

通过如上的方式，我们实现了一个新的构造函数 Student，并继承自 Person。同时，我们还为 Student 添加了一个 study 方法，以便它具有自己的行为。

总结

JavaScript 的原型机制是一种非常强大和灵活的面向对象编程概念，它通过一个对象作为另一个对象的模板，实现了继承。每个对象都有一个原型对象，它定义了该对象的属性和方法，并充当着该对象的模板。

JavaScript 中，每个对象都有一个 proto 属性，它指向该对象的原型对象。通过修改原型对象的属性和方法，我们可以影响到所有继承自该原型对象的对象。

JavaScript 的原型机制通过原型链实现了对象的继承机制，这种继承机制既简单又灵活，可以在不修改已有对象的基础上，对它们进行扩展和修改，从而实现了代码的复用。

在开发 JavaScript 应用程序时，我们可以使用原型机制来实现对象之间的继承和组合，从而使代码更加简洁、易于维护和扩展。

在使用原型机制时，我们需要注意以下几点：

对象的原型对象可以是另一个对象或 null。 当我们访问对象的属性或方法时，JavaScript 会按照原型链的顺序查找该属性或方法。 对象的原型对象可以通过 proto 属性访问和修改。 我们可以通过修改原型对象的属性和方法，影响到所有继承自该原型对象的对象。

共享资源关注公众号获取

本文由 mdnice 多平台发布