0Pricing
JavaScript Academy · 课时

继承、super，以及何时优先使用组合

使用 extends 扩展基类，在构造函数中调用 super，安全地重写方法，并了解何时简单组合更合适

继承、super，以及何时优先使用组合 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 2 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 3 节课。

整体概览

目标：不混淆地使用基础继承。

  • extends 用于创建子类
  • super(...) 调用父类构造函数
  • 重写方法；也可以选择调用 super.method()
  • 如果不是“属于某种类型”的关系，请优先使用组合
继承、super，以及何时优先使用组合 — 插图 1

extends 与 super

使用 extends 创建子类；调用 super(name) 运行父类构造函数并设置 this。

// Base class with a small field and method
class Animal {
  constructor(name) {
    this.name = name;
  }
  info() {
    return "Animal:" + this.name;
  }
}

// Child class extends the base and calls super(...)
class Dog extends Animal {
  constructor(name, breed) {
    // must call super() before using this
    super(name);
    this.breed = breed;
  }
  speak() {
    return "woof";
  }
}

const d = new Dog("Milo", "Beagle");
console.log(d.info(), d.speak());
继承、super，以及何时优先使用组合 — 插图 2

方法重写

重写方法时，您可以调用 super.method() 来复用基础逻辑，然后添加自己的调整。

// Override a method; keep parent behavior with super.method()
class Button {
  click() {
    return "base-click";
  }
}

class IconButton extends Button {
  click() {
    // call parent behavior, then add something
    const base = super.click();
    return base + "+icon";
  }
}

const b = new IconButton();
console.log(b.click()); // "base-click+icon"
继承、super，以及何时优先使用组合 — 插图 3

存在包含关系时优先使用组合

如果关系是包含（使用某个辅助工具），请优先使用组合而不是继承，以保持类的简单性。

// Composition: use a helper object instead of extending
class Logger {
  log(msg) {
    console.log("[log]", msg);
  }
}

class Player {
  constructor(name, logger) {
    this.name = name;
    this.logger = logger; // has-a logger
  }
  score(points) {
    this.logger.log(this.name + " +" + points);
  }
}

const logger = new Logger();
const p = new Player("Ayla", logger);
p.score(5);
继承、super，以及何时优先使用组合 — 插图 4

属于某种类型与包含关系

继承表示属于某种类型的关系：Dog 是 Animal。组合用于表示包含辅助工具。

// Use instanceof for a quick is-a check
console.log("Dog is Animal?", d instanceof Animal);
console.log("Player is Animal?", p instanceof Animal);
继承、super，以及何时优先使用组合 — 插图 5

初学者习惯

提示：

  • 对于初学者，让继承层次保持浅。
  • 在子类构造函数中首先调用 super(...)。
  • 只重写必要的部分；使用 super.method() 进行复用。
  • 对于实用工具和横切功能，优先使用组合。
继承、super，以及何时优先使用组合 — 插图 6

super(...) 基础测验

快速检查：子类构造函数中的 super。

继承、super，以及何时优先使用组合 — 插图 7

回顾

回顾：对于真正的属于某种类型关系使用 extends，尽早调用 super(...)，谨慎重写（有帮助时调用 super.method()），并优先使用组合实现辅助功能。

继承、super，以及何时优先使用组合 — 插图 8

常见问题解答

「继承、super，以及何时优先使用组合」课时是免费的吗？

是的 — 「继承、super，以及何时优先使用组合」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 3 节课。

「继承、super，以及何时优先使用组合」这节课中我会学到什么？

使用 extends 扩展基类，在构造函数中调用 super，安全地重写方法，并了解何时简单组合更合适 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 3 节。

「继承、super，以及何时优先使用组合」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 类字段、私有 # 字段与静态成员
  2. 继承、super，以及何时优先使用组合
  3. 混入（浅尝）——无需深层继承体系的简单复用
← 返回 JavaScript Academy