JS面向对象编程——ES6 中class的继承用法详解

1. ES6中的class

ES6中引入了class关键字，使得JS中的面向对象编程更为易用和易读。class语法基于原型继承实现，更加直观和易于理解，在编写复杂程序时更为方便。

下面是一个class的示例代码：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log(`My name is ${this.name}, I'm ${this.age} years old.`);
  }
}

定义了一个名为Person的类，有两个实例属性：name和age。其中name和age是在构造函数中进行初始化的，而sayHello方法是在class中声明的。下面我们可以创建Person类的实例并调用其方法：

const person1 = new Person('Tom', 20);
person1.sayHello();   // output: My name is Tom, I'm 20 years old.

2. class的继承

在面向对象编程中，常需要对已有的类进行扩展。这里也是通过ES6中的class来实现。class可以继承已有的类，通过继承获得父类的公共属性和方法。

以下是一个继承的示例代码：

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age); // 调用父类的构造函数
    this.grade = grade;
  }
  sayGrade() {
    console.log(`${this.name} is in grade ${this.grade}.`);
  }
}

const student1 = new Student('Lucy', 18, 12);
student1.sayHello();  // output: My name is Lucy, I'm 18 years old.
student1.sayGrade();  // output: Lucy is in grade 12.

在这个示例中，Student类继承了Person类，拥有了Person类的所有公共属性和方法。同时，Student类拥有自己的实例属性grade和方法sayGrade，这些属性和方法可以在子类中添加，不影响父类。

在继承中，子类可以调用super()方法获取父类的属性和方法。示例代码中的super(name, age)通过调用父类的构造函数来初始化name和age属性。

3. 示例解析

接下来，我们举两个示例来详细说明class的继承用法。

示例1

class Animal {
  constructor(type) {
    this.type = type;
  }
  eat() {
    console.log(`I'm a ${this.type}, I can eat.`);
  }
}

class Cat extends Animal {
  constructor(name, type) {
    super(type);
    this.name = name;
  }
  introduce() {
    console.log(`I'm a ${this.type}, my name is ${this.name}.`);
  }
}

const cat1 = new Cat('Kitty', 'cat');
cat1.introduce();  // output: I'm a cat, my name is Kitty.
cat1.eat();        // output: I'm a cat, I can eat.

这个示例实现了一个Animal类，和一个子类Cat。Animal类拥有实例属性type和方法eat；Cat类继承了Animal类，并添加了自己的实例属性name和方法introduce。

示例2

class Shape {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  move(dx, dy) {
    this.x += dx;
    this.y += dy;
  }
  static describe() {
    console.log('This is a shape.');
  }
}

class Circle extends Shape {
  constructor(x, y, r) {
    super(x, y);
    this.r = r;
  }
  area() {
    return Math.PI * this.r * this.r;
  }
}

const circle1 = new Circle(0, 0, 5);
console.log(circle1.area());  // output: 78.53981633974483
circle1.move(1, 2);
console.log(`The center of circle1 is (${circle1.x}, ${circle1.y}).`); // output: The center of circle1 is (1, 2).
Shape.describe();  // output: This is a shape.

这个示例实现了一个Shape类，有实例属性x、y和方法move，还有一个静态方法describe；Circle类继承了Shape类，并添加了自己的实例属性r和方法area，计算圆的面积。

在这个示例中，我们使用了静态方法describe来描述Shape类，这个静态方法可以直接在类名上调用，不需要实例化。同时，我们也可以借助静态方法来实现一些公共的辅助方法或工具函数。