类继承：extends 与 super 关键字 (ES6+)

欢迎来到 JavaScript 继承世界

大家好，欢迎来到今天的讲座！今天我们要聊的是 JavaScript 中的类继承，特别是 extends 和 super 关键字。如果你已经熟悉了 ES6+ 的类语法，那么你一定会觉得这些关键字非常有用。如果你还不太熟悉，别担心，我们会从头开始，一步一步地解释。

什么是类继承？

在面向对象编程中，继承是一个非常重要的概念。它允许我们创建一个新的类（子类），该类可以从现有的类（父类）继承属性和方法。这样可以避免重复代码，提高代码的可维护性。

在 JavaScript 中，extends 关键字用于定义一个类是另一个类的子类。而 super 关键字则用于调用父类的构造函数或方法。这两个关键字配合使用，可以让我们的代码更加简洁和强大。

extends：扩展已有类

extends 关键字的作用很简单：它告诉 JavaScript，当前类是基于另一个类创建的。换句话说，子类会继承父类的所有属性和方法。

例子：创建一个简单的继承关系

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

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 调用父类的构造函数
    this.breed = breed;
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.speak(); // 输出: Buddy barks.

在这个例子中，Dog 类继承了 Animal 类。Dog 类不仅拥有 Animal 类的 name 属性和 speak 方法，还可以添加自己的新属性（如 breed）和方法。

super：调用父类的方法

super 关键字有两个主要用途：

调用父类的构造函数：在子类的构造函数中，必须使用 super() 来调用父类的构造函数。这确保了父类的初始化逻辑得以执行。
调用父类的方法：在子类的方法中，可以使用 super 来调用父类的同名方法，或者调用父类中的其他方法。

例子：调用父类的构造函数

class Vehicle {
  constructor(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
  }

  start() {
    console.log(`Starting the ${this.make} ${this.model}.`);
  }
}

class Car extends Vehicle {
  constructor(make, model, year, color) {
    super(make, model, year); // 调用父类的构造函数
    this.color = color;
  }

  start() {
    super.start(); // 调用父类的 start 方法
    console.log(`The car is ${this.color}.`);
  }
}

const myCar = new Car('Toyota', 'Corolla', 2022, 'blue');
myCar.start();
// 输出:
// Starting the Toyota Corolla.
// The car is blue.

在这个例子中，Car 类继承了 Vehicle 类，并且在 start 方法中调用了父类的 start 方法。这使得我们可以重用父类的逻辑，同时添加新的功能。

super 的注意事项

必须在子类构造函数中调用 super()：如果你在子类的构造函数中没有调用 super()，JavaScript 会抛出错误。这是因为子类需要先初始化父类的属性和方法。

class Parent {
 constructor() {
   this.value = 42;
 }
}

class Child extends Parent {
 constructor() {
   // 忘记调用 super() 会导致错误
   console.log(this.value); // ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
 }
}

super 只能在构造函数和方法中使用：super 不能在类的静态方法中使用，也不能在类的外部使用。

super 可以访问父类的静态方法：除了实例方法，super 还可以用来调用父类的静态方法。

class Parent {
 static greet() {
   console.log('Hello from Parent!');
 }
}

class Child extends Parent {
 static greet() {
   super.greet(); // 调用父类的静态方法
   console.log('Hello from Child!');
 }
}

Child.greet();
// 输出:
// Hello from Parent!
// Hello from Child!

多层继承

JavaScript 支持多层继承，也就是说，一个类可以继承另一个类，而这个类又可以继承另一个类。这种链式继承结构可以让你构建复杂的类层次。

例子：多层继承

class Grandparent {
  constructor(grandparentName) {
    this.grandparentName = grandparentName;
  }

  introduce() {
    console.log(`I am ${this.grandparentName}, the grandparent.`);
  }
}

class Parent extends Grandparent {
  constructor(parentName, grandparentName) {
    super(grandparentName);
    this.parentName = parentName;
  }

  introduce() {
    super.introduce(); // 调用父类的 introduce 方法
    console.log(`I am ${this.parentName}, the parent.`);
  }
}

class Child extends Parent {
  constructor(childName, parentName, grandparentName) {
    super(parentName, grandparentName);
    this.childName = childName;
  }

  introduce() {
    super.introduce(); // 调用父类的 introduce 方法
    console.log(`I am ${this.childName}, the child.`);
  }
}

const family = new Child('Alice', 'Bob', 'Charlie');
family.introduce();
// 输出:
// I am Charlie, the grandparent.
// I am Bob, the parent.
// I am Alice, the child.

在这个例子中，Child 类继承了 Parent 类，而 Parent 类又继承了 Grandparent 类。通过 super，每个类都可以调用其父类的方法，形成了一条完整的继承链。

继承中的陷阱

虽然继承是非常强大的工具，但如果不小心使用，也可能会带来一些问题。以下是几个常见的陷阱：

过度继承：不要为了继承而继承。有时候，继承并不是解决问题的最佳方式。例如，如果你只是想共享一些方法，考虑使用组合（composition）而不是继承。
方法覆盖：当你在子类中重写父类的方法时，要小心不要破坏父类的原有逻辑。如果需要保留父类的行为，记得使用 super 来调用父类的方法。
静态方法的继承：静态方法不会被实例继承，因此如果你在子类中定义了同名的静态方法，它只会覆盖父类的静态方法，而不会影响实例方法。

总结

今天我们学习了如何使用 extends 和 super 关键字来实现类继承。extends 让我们能够轻松地创建子类并继承父类的功能，而 super 则帮助我们在子类中调用父类的构造函数和方法。通过合理的继承设计，我们可以编写出更简洁、更易于维护的代码。

当然，继承并不是万能的解决方案。在实际开发中，我们需要根据具体的需求选择合适的设计模式。希望今天的讲座对你有所帮助，下次见！

参考文献

MDN Web Docs: Classes
ECMAScript 2015 (ES6) Specification: Class Definitions

感谢大家的聆听！如果有任何问题，欢迎在评论区留言讨论。😊