JavaScript类继承及实例化的方法

介绍

在JavaScript中，类继承可以帮助我们实现代码重用，简化我们的代码。

类的声明

在ES6中，我们可以使用class来声明一个类。

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

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

继承

子类可以继承父类的属性和方法，这样就可以避免写重复的代码。在ES6中，我们可以使用extends关键字来实现继承。

class Cat extends Animal {
  constructor(name, color) {
    super(name);
    this.color = color;
  }

  run() {
    console.log(`I'm running`);
  }
}

上面的代码中，我们声明了一个Cat类，它继承了Animal类，拥有了Animal类的所有属性和方法。在构造函数中，我们使用super关键字来调用父类的构造函数。注意，在调用父类的构造函数前，我们必须使用this关键字来访问“自己”的属性。

实例化

实例化一个类，我们可以使用new关键字。

const tom = new Cat('Tom', 'white');
tom.sayHello(); // Hello, my name is Tom
tom.run(); // I'm running

上面的代码中，我们实例化了一个Cat类，指定了它的名字和颜色。我们可以调用这个实例的方法来输出它的名字和运动状态。

示例

下面是一个简单的示例，包含一个父类和一个子类。父类是一个形状类，它拥有一个名字和一个面积属性，并且可以输出这个名字。子类是一个矩形类，它继承了形状类的属性和方法，并且拥有自己的宽和高属性。

class Shape {
  constructor(name, area) {
    this.name = name;
    this.area = area;
  }

  getName() {
    console.log(`This shape's name is ${this.name}`);
  }
}

class Rectangle extends Shape {
  constructor(name, width, height) {
    super(name, width * height);
    this.width = width;
    this.height = height;
  }

  printArea() {
    console.log(`This rectangle's area is ${this.area}`);
  }
}

const rect = new Rectangle('Rect1', 3, 4);
rect.getName(); // This shape's name is Rect1
rect.printArea(); // This rectangle's area is 12

上面的代码中，我们声明了两个类，Shape和Rectangle，Rectangle继承了Shape的属性和方法，并且拥有自己的属性width和height。我们实例化了一个Rectangle类的对象，初始化它的名字、宽和高属性，并且调用它的两个方法来输出名字和面积。

结论

使用ES6的class关键字，我们可以很方便地声明诸如父类、子类这样的类，并且实现类的继承和实例化。这使得我们的代码更加简洁、易于理解。