类继承
TeaOrder 复用 Order 的共同部分，再用 extra 记录茶订单特有的信息，无须重写全部逻辑。
不再是 Cookie
上一页最后的文字是 theme / dark。这里在内存中创建对象，并不向浏览器保存文本。
父类负责共性
Order 接收 drink 和 size；它的 label 方法生成所有订单都可使用的两段式标签。
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
const order = new Order("tea", "regular");
console.log(order.label());
控制台输出 tea / regular。order instanceof Order 为 true，方法通过 prototype 共享。
子类先建基础
extends Order 建立继承关系。子类构造器必须先完成继承来的部分，才能处理自己的字段。
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
class TeaOrder extends Order {
constructor(drink, size, extra) {
super(drink, size);
this.extra = extra;
}
}
const tea = new TeaOrder("tea", "regular", "mint");
console.log(tea.drink);
console.log(tea.extra);
日志先后是 tea 与 mint。若在 super 之前访问 this.extra，会出现 ReferenceError。
改写而不复制
TeaOrder 可以改写 label，但 super.label() 已经给出了饮品和尺寸，不必再拼一次。
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
class TeaOrder extends Order {
constructor(drink, size, extra) {
super(drink, size);
this.extra = extra;
}
label() {
return super.label() + " / " + this.extra;
}
}
console.log(new TeaOrder("tea", "regular", "mint").label());
完整输出为 tea / regular / mint。该对象既是 instanceof TeaOrder，也是 instanceof Order。
各自的职责
Order 管理每种订单都有的内容；TeaOrder 只增加茶的细节。不要只为改名字就创建子类。
页面文字
示例创建 TeaOrder，并把改写后的标签写入页面。
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
class Order {
constructor(drink, size) {
this.drink = drink;
this.size = size;
}
label() {
return this.drink + " / " + this.size;
}
}
class TeaOrder extends Order {
constructor(drink, size, extra) {
super(drink, size);
this.extra = extra;
}
label() {
return super.label() + " / " + this.extra;
}
}
document.querySelector("#line").textContent =
new TeaOrder("tea", "regular", "mint").label();
</script>
</body>
</html>
页面显示 tea / regular / mint。theme / dark 属于 Cookie 示例，tea / regular 则只有父类的结果。
动手走一遍
先创建 Order，再创建带 mint 的 TeaOrder。把 super 放在 this.extra 前面，并扩展 super.label()。
容易出错的地方
不要在 super 前使用 this，不要完整复制父类标签，也别忘了子类实例仍属于 Order。
记住这些
extends 连接两个类；super(...) 初始化父类部分；改写方法只添加自己的细节。
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部