JavaScript 类继承学习笔记

什么是类继承？

类继承是OOP（面向对象编程）的一个重要概念。它允许我们定义一个新的类，该类通过继承另一个类的属性和方法来扩展功能。

在JavaScript中，类继承通过原型链实现。原型链是一种链接所有对象的机制，每个对象都有一个指向其原型的引用。如果对象本身没有某个属性或方法，则会查找其原型对象是否包含该属性或方法，直到找到为止或者返回undefined。

如何使用类继承？

在JavaScript中，类继承可以通过以下方式实现：

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

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

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

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

let d = new Dog('Mitzie');
d.speak(); // 输出 'Mitzie barks.'

上述代码定义了Animal类和Dog类，其中Dog类继承自Animal类。使用关键字extends指定父类，并使用super()调用父类的构造函数。这使得在创建Dog实例时需要提供与Animal类相同的参数。

Dog类还重写了Animal类的speak()方法。由于方法调用时会查找原型链，因此当我们调用Dog实例的speak()方法时，它将调用Dog类中的speak()方法而不是Animal类中的speak()方法。

继承的实例

javascriptCopy Code
class Shape {
  constructor(name) {
    this.name = name;
  }

  area() {
    console.log(`${this.name} has no area defined.`);
  }
}

class Circle extends Shape {
  constructor(name, radius) {
    super(name);
    this.radius = radius;
  }

  area() {
    console.log(`${this.name} has an area of ${Math.PI * this.radius ** 2}.`);
  }
}

class Rectangle extends Shape {
  constructor(name, width, height) {
    super(name);
    this.width = width;
    this.height = height;
  }

  area() {
    console.log(`${this.name} has an area of ${this.width * this.height}.`);
  }
}

let c = new Circle("Circle", 5);
c.area(); // 输出 'Circle has an area of 78.53981633974483.'

let r = new Rectangle("Rectangle", 4, 3);
r.area(); // 输出 'Rectangle has an area of 12.'

上述代码定义了Shape类和Circle类、Rectangle类分别继承自Shape类,通过继承，我们可以不必在每个子类中重新编写共享的代码，并且可以从父类中继承一些属性和方法。这节省了时间和减少了代码冗余。