JavaScript 原型链和继承：全面复习

前言

JavaScript 中的原型链和继承机制是理解该语言面向对象编程的基础，掌握这些概念对于理解 JavaScript 代码和编写更健壮、可扩展的应用程序至关重要。本文将全面复习 JavaScript 中的原型链和继承机制，帮助您理解这些概念并掌握其应用。

原型链

在 JavaScript 中，每个对象都有一个原型对象，原型对象也是一个对象，它包含了该对象继承的属性和方法。每个对象的原型对象可以通过 __proto__ 属性访问。例如，以下代码将输出 Object {}：

console.log(Object.prototype.__proto__);

Object.prototype 是所有对象的祖先原型，它包含了所有对象共有的属性和方法。例如，toString() 方法用于将对象转换为字符串，valueOf() 方法用于返回对象的原始值。

继承

JavaScript 中的继承是通过原型链实现的。当一个对象被创建时，它会继承其原型对象的所有属性和方法。例如，以下代码创建了一个 Person 对象，该对象继承了 Object 原型的属性和方法：

const person = new Person();

我们可以使用 person.__proto__ 属性来访问 Person 原型，并使用 person.__proto__.__proto__ 属性来访问 Object 原型。

原型

原型对象是对象的模板，它包含了该对象的所有属性和方法。原型对象可以通过 Object.getPrototypeOf() 方法访问。例如，以下代码将输出 Object {}：

console.log(Object.getPrototypeOf(Object.prototype));

原型对象是对象的模板，它包含了该对象的所有属性和方法。原型对象可以通过 Object.getPrototypeOf() 方法访问。例如，以下代码将输出 Function {}：

console.log(Object.getPrototypeOf(Function));

proto

__proto__ 属性是对象的私有属性，它指向该对象的原型对象。__proto__ 属性只能在对象内部使用，不能在外部访问。例如，以下代码将输出 Object {}：

console.log(Object.prototype.__proto__);

constructor

constructor 属性是对象的私有属性，它指向该对象的构造函数。constructor 属性只能在对象内部使用，不能在外部访问。例如，以下代码将输出 Function：

console.log(Object.prototype.constructor);

Object

Object 是 JavaScript 中的根对象，它是所有对象的祖先原型。Object 原型包含了所有对象共有的属性和方法。例如，toString() 方法用于将对象转换为字符串，valueOf() 方法用于返回对象的原始值。

类

类是 JavaScript 中的语法糖，它允许我们使用更简洁的语法来定义对象。类实际上是函数，它可以通过 new 来实例化。例如，以下代码定义了一个 Person 类：

class Person {
  constructor(name) {
    this.name = name;
  }
}

我们可以使用 new 关键字来实例化 Person 类，并创建一个新的 Person 对象：

const person = new Person("John Doe");

实例

实例是类的具体对象，它包含了类的所有属性和方法。实例可以通过 new 关键字来创建。例如，以下代码创建了一个 Person 实例：

const person = new Person("John Doe");

封装

封装是将数据的表示和操作细节隐藏起来，只对外部提供接口进行访问。封装有助于提高代码的可维护性和安全性。例如，以下代码将 name 属性和 getName() 方法封装在 Person 类中：

class Person {
  #name;

  constructor(name) {
    this.#name = name;
  }

  getName() {
    return this.#name;
  }
}

多态

多态是允许不同类型的对象对同一消息做出不同的响应。多态有助于提高代码的可扩展性和重用性。例如，以下代码使用多态来实现一个 draw() 方法，该方法可以绘制不同类型的图形：

class Circle {
  draw() {
    console.log("Drawing a circle");
  }
}

class Square {
  draw() {
    console.log("Drawing a square");
  }
}

class Rectangle {
  draw() {
    console.log("Drawing a rectangle");
  }
}

const shapes = [new Circle(), new Square(), new Rectangle()];

for (const shape of shapes) {
  shape.draw();
}

抽象

抽象是将对象的属性和方法抽象出来，只保留其本质特征。抽象有助于提高代码的可读性和可维护性。例如，以下代码将 Person 类抽象成一个 Employee 类：

class Employee extends Person {
  constructor(name, jobTitle) {
    super(name);
    this.jobTitle = jobTitle;
  }
}

总结

原型链和继承是 JavaScript 中面向对象编程的基础，掌握这些概念对于理解 JavaScript 代码和编写更健壮、可扩展的应用程序至关重要。本文介绍了原型链、继承、原型、proto、constructor、Object、类、实例、封装、多态和抽象等重要概念，并通过丰富的示例和代码片段帮助您理解这些概念和机制。