ES6 class类实现继承实例详解

在JavaScript中，类继承是一种基本的面向对象编程技巧。ES6引入了类和继承机制，使得JavaScript编写类和继承的方式更加直观和简单。

ES6类声明

ES6类通过class关键字声明，在类中定义一个构造函数，使用new关键字来实例化：

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

  eat(food) {
    console.log(`${this.name} is eating ${food}.`);
  }

  sleep() {
    console.log(`${this.name} is sleeping.`);
  }
}

const cat = new Animal('Tom', 1);
cat.eat('fish'); // Tom is eating fish.

继承机制

ES6继承使用extends关键字和super方法来实现：

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

  meow() {
    console.log(`${this.name} is meowing.`);
  }
}

const blackCat = new Cat('Black', 2, 'black');
blackCat.sleep(); // Black is sleeping.
blackCat.meow(); // Black is meowing.

上述Cat类继承了Animal类，并使用super方法调用其构造函数，从而继承了name和age属性。同时，Cat类还定义了一个meow方法。由于Cat类继承了Animal类的sleep方法，因此blackCat实例可以调用sleep方法。

示例一：实现多重继承

ES6类的继承机制支持多重继承，一个类可以同时继承多个类。比如，我们定义了一个喜欢吃和睡觉的动物，又定义了一个可以跑的动物，最后定义了一个综合了这些特点的动物：

class Eatable {
  eat(food) {
    console.log(`${this.name} is eating ${food}.`);
  }
}

class Sleepable {
  sleep() {
    console.log(`${this.name} is sleeping.`);
  }
}

class Runnable {
  run() {
    console.log(`${this.name} is running.`);
  }
}

class Animal extends Eatable {
  constructor(name, age) {
    super();
    this.name = name;
    this.age = age;
  }
}

class Dog extends Animal {
  constructor(name, age, breed) {
    super(name, age);
    this.breed = breed;
  }
}

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

class EatSleepRun extends Eatable(Sleepable(Runnable(Animal))) {
  constructor(name, age, breed, color) {
    super(name, age);
    this.breed = breed;
    this.color = color;
  }
}

const dog = new Dog('Buddy', 3, 'Golden Retriever');
dog.eat('bone'); // Buddy is eating bone.

const cheetah = new Cheetah('Tom', 2, 'yellow');
cheetah.run(); // Tom is running.

上述代码中，我们定义了三个基础类：Eatable，Sleepable和Runnable，并定义了一个综合以上三个基础特点的类EatSleepRun，其中EatSleepRun类继承了三个基础类。最后，我们定义了一个Dog类和Cheetah类，用来继承Animal和EatSleepRun类。

示例二：子类构造函数中的属性设置

子类的构造函数中除了使用super调用父类构造函数，还可以在构造函数中添加自己的属性和方法，为子类添加更多的功能。下面的代码演示了如何使用子类的构造函数为子类添加属性：

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

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
    this.type = 'mammal';
  }
}

const dog = new Dog('Buddy', 'Golden Retriever');
console.log(dog.name); // "Buddy"
console.log(dog.breed); // "Golden Retriever"
console.log(dog.type); // "mammal"

在上述代码中，我们定义了一个Animal类和一个继承自Animal的子类Dog，在Dog的构造函数中，我们使用super方法调用父类的构造函数，同时添加自己的breed属性和type属性。

总结

ES6类的继承机制让继承变得更加直观和简单，代码的可读性和可维护性都得到了提高，多重继承和子类构造函数的属性设置等特别场景也得到了支持。