JS `super` 关键字：调用父类构造函数或方法

各位观众老爷，大家好！欢迎来到今天的“JS super 关键字：祖传秘方，一代更比一代强”技术讲座。今天咱们就来扒一扒 JavaScript 里的 super 关键字，看看它到底是个什么来头，怎么用才能让我们的代码更优雅、更强大。准备好了吗？发车啦！

第一章：super 是什么？它从哪儿来？

要理解 super，首先要明白 JavaScript 的原型继承机制。简单来说，就是子类可以继承父类的属性和方法。super 关键字，就是用来访问和调用父类上的属性和方法的。你可以把它想象成一个“祖传秘方”，子类可以通过 super 来获取父类的秘方，然后在此基础上进行创新和发展。

在 ES5 中，继承是通过原型链来实现的，代码看起来比较复杂。ES6 引入了 class 关键字，让 JavaScript 的继承语法更接近于其他面向对象语言。super 关键字也是在 ES6 中引入的，它简化了子类访问父类成员的方式。

第二章：super()：调用父类构造函数

super() 最常见的用法就是在子类的构造函数中调用父类的构造函数。这是必须的！如果子类有构造函数，并且使用了 this 关键字，那么必须先调用 super()。不调用会报错！

为什么必须调用 super() 呢？

原因很简单：在 JavaScript 中，this 的指向是由调用方式决定的。在子类的构造函数中，this 必须先指向父类的实例，才能正确地初始化子类的属性。super() 的作用就是创建父类的实例，并将 this 指向它。

举个栗子：

class Animal {
  constructor(name) {
    this.name = name;
    console.log("Animal constructor called");
  }

  sayHello() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

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

  bark() {
    console.log("Woof!");
  }
}

const myDog = new Dog("Buddy", "Golden Retriever");
myDog.sayHello(); // 输出：Hello, I'm Buddy
myDog.bark();    // 输出：Woof!

在这个例子中，Dog 类继承了 Animal 类。在 Dog 的构造函数中，我们首先调用了 super(name)，将 name 传递给父类的构造函数。这样，Animal 的构造函数就会被执行，this.name 就会被正确地初始化。然后，我们再初始化 Dog 特有的属性 breed。

如果我们忘记调用 super()，就会报错：

class Dog extends Animal {
  constructor(name, breed) {
    // super(name); // 忘记调用 super()
    this.breed = breed; // 报错：Must call super constructor in derived class before accessing 'this' or returning from derived constructor
  }

  bark() {
    console.log("Woof!");
  }
}

这个错误信息很明确地告诉我们，必须在访问 this 之前调用 super()。

第三章：super.methodName()：调用父类方法

除了调用父类构造函数，super 还可以用来调用父类的方法。这在子类需要扩展或修改父类方法的时候非常有用。

举个栗子：

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

  sayHello() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

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

  sayHello() {
    super.sayHello(); // 调用父类的 sayHello 方法
    console.log("I'm a dog!");
  }

  bark() {
    console.log("Woof!");
  }
}

const myDog = new Dog("Buddy", "Golden Retriever");
myDog.sayHello(); // 输出：Hello, I'm BuddynI'm a dog!

在这个例子中，Dog 类重写了 Animal 类的 sayHello 方法。在 Dog 的 sayHello 方法中，我们首先使用 super.sayHello() 调用了父类的 sayHello 方法，然后再输出 "I’m a dog!"。这样，Dog 的 sayHello 方法既保留了父类的功能，又添加了新的功能。

第四章：super 的使用场景：祖传秘方大改造

super 关键字在实际开发中有很多用途，下面列举一些常见的场景：

• 扩展父类方法： 在子类中重写父类方法，并在重写的方法中调用父类的方法，以保留父类的功能并添加新的功能。
• 修改父类方法： 在子类中重写父类方法，并在重写的方法中修改父类方法的行为。
• 访问父类属性： 在子类中访问父类的属性，即使该属性在子类中被覆盖。

第五章：super 的注意事项：小心驶得万年船

在使用 super 关键字时，需要注意以下几点：

• 必须在子类的构造函数中使用 super()： 如果子类有构造函数，并且使用了 this 关键字，那么必须先调用 super()。
• super() 必须在 this 之前调用： 在子类的构造函数中，super() 必须在访问 this 之前调用。
• super 只能在派生类中使用： super 关键字只能在继承了其他类的类中使用。
• super 的上下文： super 的上下文很重要，它取决于 super 被调用的位置。在构造函数中，super 指向父类的构造函数。在方法中，super 指向父类的原型对象。

第六章：super 和 this 的爱恨情仇

super 和 this 是 JavaScript 中两个非常重要的关键字，它们经常一起出现，也经常让人感到困惑。

• this： this 的指向取决于调用方式。在函数中，this 指向调用该函数的对象。在构造函数中，this 指向新创建的实例。
• super： super 用来访问和调用父类上的属性和方法。

可以用一个表格来总结 super 和 this 的区别：

特性	this	super
作用	指向当前对象或实例	访问和调用父类成员
上下文	取决于调用方式	取决于调用的位置
使用场景	访问和修改当前对象的属性和方法	调用父类构造函数和方法，访问父类属性

第七章：super 的高级用法：解锁更多姿势

除了常见的用法，super 还有一些高级用法，可以帮助我们编写更灵活、更强大的代码。

• 使用 super 调用父类的静态方法： 在子类中，可以使用 super.constructor.methodName() 来调用父类的静态方法。

  class Animal {
    static sayClassName() {
      console.log("Animal");
    }
  }
  
  class Dog extends Animal {
    static sayClassName() {
      super.constructor.sayClassName(); // 调用父类的静态方法
      console.log("Dog");
    }
  }
  
  Dog.sayClassName(); // 输出：AnimalnDog

• 使用 super 调用父类的 getter 和 setter： 在子类中，可以使用 super.propertyName 来访问父类的 getter 和 setter。

  class Animal {
    constructor(name) {
      this._name = name;
    }
  
    get name() {
      return this._name;
    }
  
    set name(value) {
      this._name = value;
    }
  }
  
  class Dog extends Animal {
    constructor(name, breed) {
      super(name);
      this.breed = breed;
    }
  
    get name() {
      return `Dog: ${super.name}`; // 调用父类的 getter
    }
  
    set name(value) {
      super.name = value; // 调用父类的 setter
    }
  }
  
  const myDog = new Dog("Buddy", "Golden Retriever");
  console.log(myDog.name); // 输出：Dog: Buddy
  myDog.name = "Max";
  console.log(myDog.name); // 输出：Dog: Max

第八章：super 的最佳实践：让代码更上一层楼

• 明确你的意图： 在使用 super 之前，要明确你的意图：你是想扩展父类的方法，还是修改父类的方法，还是仅仅想访问父类的属性？
• 保持代码的简洁性： 尽量避免过度使用 super，只在必要的时候使用它。
• 编写清晰的注释： 在代码中添加清晰的注释，说明 super 的作用和用法。
• 进行充分的测试： 编写充分的测试用例，确保 super 的使用是正确的。

第九章：super 的未来展望：站在巨人的肩膀上

super 关键字是 JavaScript 中非常重要的一个特性，它简化了子类访问父类成员的方式，提高了代码的可读性和可维护性。随着 JavaScript 的不断发展，super 关键字的功能也会越来越强大，用法也会越来越灵活。

我们可以期待在未来的 JavaScript 版本中，super 能够提供更多的功能，例如：

• 更灵活的上下文管理： 让开发者能够更方便地控制 super 的上下文。
• 更强大的静态方法调用： 让开发者能够更方便地调用父类的静态方法。
• 更智能的类型推断： 让 JavaScript 引擎能够更准确地推断 super 的类型。

总结：super，你的代码超能力！

今天，我们深入探讨了 JavaScript 中的 super 关键字，从它的基本概念到高级用法，再到最佳实践和未来展望。希望通过今天的讲座，大家能够对 super 关键字有更深入的理解，并能够灵活地运用它来编写更优雅、更强大的代码。

super 就像一把钥匙，可以打开父类的宝藏，让子类站在巨人的肩膀上，创造出更辉煌的成就。记住，合理使用 super，你的代码就能拥有超能力！

今天的讲座就到这里，感谢大家的观看！下次再见！