从零探索super关键字，JS的“精神内涵”得到诠释

2023-10-22 05:27:53

对于熟悉 ES6 class 的 JavaScript 开发者来说，“super”肯定不会陌生。它的使用场景很简单：当存在类继承时，在子类构造函数中调用父类构造器，或者在子类方法中调用被覆盖的父类同名方法。这个语义与传统的面向对象编程语言是一致的。

1. 给原型链“穿上靴子”：super 实现继承

在 JavaScript 中，类的继承是通过原型链（prototype chain）实现的。当子类继承父类时，子类的原型对象（prototype）被设置为父类的实例。这意味着子类可以访问父类的所有属性和方法，包括私有和公有属性与方法。

此时，super 就像一位穿着靴子的旅行者，它可以沿着原型链“跋涉”，访问父类的属性和方法。在子类构造函数中使用 super() 可以调用父类的构造函数，并使用 super.propertyName 或 super.methodName 来访问父类的属性或方法。

2. 覆盖父类，释放多态之美

super 的另一个重要用途是实现方法覆盖（method overriding）。当子类的方法与父类的方法同名时，子类的方法会覆盖父类的方法。这意味着当调用子类实例的方法时，实际执行的是子类的方法，而不是父类的方法。

在这个场景下，super 又像一位拿着放大镜的侦探，它可以识别出被覆盖的方法并执行父类版本的方法。使用 super.methodName() 可以调用被覆盖的父类方法。

3. 深入浅出：实例代码解析

为了更清晰地理解 super 的用法，我们来看几个示例代码：

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

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

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

  speak() {
    super.speak(); // 调用父类speak方法
    console.log(`I am a ${this.breed} dog`);
  }
}

const dog = new Dog('Buddy', 'Golden Retriever');
dog.speak(); // 输出：I am Buddy; I am a Golden Retriever dog