7.2 class 语法糖与继承（extends、super）

7.2 class 语法糖与继承（extends、super）

ES6 引入了 class 语法糖，使得 JavaScript 的面向对象编程更加直观和易用。class 提供了 extends 和 super 关键字，用于实现继承和调用父类方法。本节将详细介绍 class 的用法及其继承机制。

7.2.1 class 的基本语法

class 是 JavaScript 中定义类的一种语法糖，底层仍然基于原型链。

1. 定义类

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

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

const dog = new Animal("Dog");
dog.speak(); // 输出 "Dog makes a sound."

2. 静态方法
使用 static 关键字定义静态方法，静态方法属于类而不是实例。

class MathUtils {
  static add(a, b) {
    return a + b;
  }
}

console.log(MathUtils.add(1, 2)); // 输出 3

7.2.2 继承（extends 和 super）

extends 关键字用于实现类的继承，super 关键字用于调用父类的构造函数或方法。

1. 基本继承

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

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

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

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

const dog = new Dog("Buddy", "Golden Retriever");
dog.speak(); // 输出 "Buddy makes a sound."
dog.bark(); // 输出 "Buddy barks!"

2. 重写父类方法
子类可以重写父类的方法：

class Cat extends Animal {
  speak() {
    console.log(`${this.name} meows.`);
  }
}

const cat = new Cat("Whiskers");
cat.speak(); // 输出 "Whiskers meows."

3. 调用父类方法
使用 super 调用父类的方法：

class Dog extends Animal {
  speak() {
    super.speak(); // 调用父类的 speak 方法
    console.log(`${this.name} barks!`);
  }
}

const dog = new Dog("Buddy");
dog.speak();
// 输出：
// Buddy makes a sound.
// Buddy barks!

7.2.3 静态方法的继承

静态方法也可以被继承：

class Animal {
  static info() {
    console.log("This is an animal class.");
  }
}

class Dog extends Animal {}

Dog.info(); // 输出 "This is an animal class."

7.2.4 示例代码

示例 1：基本继承

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

  drive() {
    console.log(`Driving ${this.make} ${this.model}`);
  }
}

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

  honk() {
    console.log("Honk honk!");
  }
}

const car = new Car("Toyota", "Corolla", 2020);
car.drive(); // 输出 "Driving Toyota Corolla"
car.honk(); // 输出 "Honk honk!"

示例 2：重写父类方法

class Bird extends Animal {
  speak() {
    console.log(`${this.name} chirps.`);
  }
}

const bird = new Bird("Tweety");
bird.speak(); // 输出 "Tweety chirps."

示例 3：调用父类方法

class Lion extends Animal {
  speak() {
    super.speak();
    console.log(`${this.name} roars!`);
  }
}

const lion = new Lion("Simba");
lion.speak();
// 输出：
// Simba makes a sound.
// Simba roars!

7.2.5 总结

• class 语法糖：简化了 JavaScript 的面向对象编程。
• extends：用于实现类的继承。
• super：用于调用父类的构造函数或方法。
• 静态方法：通过 static 关键字定义，属于类而不是实例。

通过掌握 class、extends 和 super，你可以更直观地实现面向对象编程。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。

思考题：

1. class 语法糖的底层实现是什么？
2. 如何使用 super 调用父类的方法？
3. 静态方法的主要用途是什么？