JavaScript高级面向对象的三大特征：抽象、封装、继承

JavaScript高级面向对象的三大特征

抽象

抽象是面向对象编程的一个基本概念，它允许我们忽略对象的具体实现细节，而只关注其接口。抽象可以帮助我们构建更模块化和可重用的代码。例如，我们可以定义一个Shape类，它包含所有形状的公共属性和方法。然后，我们可以创建矩形、圆形和三角形等子类，它们都继承了Shape类的属性和方法。这样，我们就创建了一个形状的层次结构，可以很容易地添加新的形状类。

封装

封装是面向对象编程的另一个基本概念，它允许我们将对象的属性和方法隐藏起来，这样只能通过对象的接口来访问它们。封装可以帮助我们提高代码的安全性、可维护性和可重用性。例如，我们可以定义一个Rectangle类，它包含计算矩形面积和周长的私有方法。然后，我们可以创建Rectangle对象并调用其public方法来计算其面积和周长。这样，我们就将Rectangle类的实现细节隐藏起来了，使代码更加安全和易于维护。

继承

继承是面向对象编程中最重要的概念之一，它允许我们创建一个类，该类可以继承另一个类的所有属性和方法。继承可以帮助我们创建更具组织性和可维护性的代码。例如，我们可以定义一个Shape类，它包含所有形状的公共属性和方法。然后，我们可以创建矩形、圆形和三角形等子类，它们都继承了Shape类的属性和方法。这样，我们就创建了一个形状的层次结构，可以很容易地添加新的形状类。

原型链

在JavaScript中，每个对象都有一个原型对象，原型对象又具有另一个原型对象，如此循环，直到最终到达Object.prototype。这个从对象到Object.prototype的链条就叫做原型链。原型链允许对象访问其原型对象的所有属性和方法。例如，我们可以定义一个Shape类，它包含所有形状的公共属性和方法。然后，我们可以创建Rectangle对象并调用其面积方法。Rectangle对象没有自己的面积方法，但它可以访问其原型对象Shape类的面积方法。

类和对象

在JavaScript中，类是一种特殊的函数，它用于创建对象。类包含对象的属性和方法，而对象是类的实例。例如，我们可以定义一个Shape类，它包含所有形状的公共属性和方法。然后，我们可以使用Shape类来创建Rectangle对象和Circle对象。Rectangle对象和Circle对象都是Shape类的实例，它们都具有Shape类的属性和方法。

实际代码示例

// 定义Shape类
class Shape {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  // 计算面积
  getArea() {
    return this.width * this.height;
  }

  // 计算周长
  getPerimeter() {
    return 2 * (this.width + this.height);
  }
}

// 定义Rectangle类
class Rectangle extends Shape {
  constructor(width, height) {
    super(width, height);
  }
}

// 定义Circle类
class Circle extends Shape {
  constructor(radius) {
    super(radius, radius);
  }

  // 计算面积
  getArea() {
    return Math.PI * this.width ** 2;
  }

  // 计算周长
  getPerimeter() {
    return 2 * Math.PI * this.width;
  }
}

// 创建Rectangle对象
const rectangle = new Rectangle(10, 20);

// 计算Rectangle对象的面积和周长
const rectangleArea = rectangle.getArea();
const rectanglePerimeter = rectangle.getPerimeter();

// 创建Circle对象
const circle = new Circle(5);

// 计算Circle对象的面积和周长
const circleArea = circle.getArea();
const circlePerimeter = circle.getPerimeter();

// 输出结果
console.log(`Rectangle area: ${rectangleArea}`);
console.log(`Rectangle perimeter: ${rectanglePerimeter}`);
console.log(`Circle area: ${circleArea}`);
console.log(`Circle perimeter: ${circlePerimeter}`);

输出结果：

Rectangle area: 200
Rectangle perimeter: 60
Circle area: 78.53981633974483
Circle perimeter: 31.41592653589793