class 的继承

ES6 中 class 的继承用关键字 extends 声明：

class Shape {
  move() {
    console.log('move');
  }
}

// Circle 继承 Shape
class Circle extends Shape{
  draw() {
    console.log('draw');
  }
}

const c = new Circle();

现在实例 c 既有自己的方法也继承了父类 Shape 的方法：

c.draw()
// draw

c.move()
// move

带构造函数的继承

当带上构造器的时候 class 怎么继承呢？当父类有构造器的时候想在子类使用构造器应该先用 super 调用父类的构造器来创建一个父类实例。

class Shape {
  constructor(color) {
    this.color = color;
  }

  move() {
    console.log('move');
  }
}

class Circle extends Shape{
  constructor(color, radius) {
    super(color); // 调用父类构造器
    this.radius = radius;
  }

  draw() {
    console.log('draw');
  }
}

const c = new Circle('red', 1);

改写父类的函数

如果父类的函数不适宜在子类直接使用需要修改，可以这样：

class Shape {
  constructor(color) {
    this.color = color;
  }

  move() {
    console.log('move');
  }
}

class Circle extends Shape{
  constructor(color, radius) {
    super(color); // 调用父类构造器
    this.radius = radius;
  }

  draw() {
    console.log('draw');
  }

  // 修改父类函数
  move() {
    console.log('Circle move');
  }
}

const c = new Circle('red', 1);

演示：

c.move()
// Circle move