透析 Class 继承精髓，掌握对象世界中的亲密关系

2023-11-17 18:27:08

现代 JavaScript 的继承之美：Class 继承

Class 继承是现代 JavaScript 中实现对象继承的一种重要机制。它通过 extends 实现，使子类能够继承父类的属性和方法，从而构建出具有亲密关系的对象。

类和继承：亲密关系的搭建

类是 JavaScript 中用来创建对象的蓝图，而继承就像是一场接力赛，子类从父类手中接过属性和方法的接力棒，继续前行。

案例解析：ColorPoint 类的诞生

让我们以 ColorPoint 类为例，这是一个继承了 Point 类的类。

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return `(${this.x}, ${this.y})`;
  }
}

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y);
    this.color = color;
  }

  toString() {
    return `(${this.x}, ${this.y}) is ${this.color}`;
  }
}

const point = new Point(1, 2);
console.log(point.toString()); // (1, 2)

const colorPoint = new ColorPoint(3, 4, 'red');
console.log(colorPoint.toString()); // (3, 4) is red

抽丝剥茧：揭示 Class 继承的细节

属性继承：子类共享父类的属性

ColorPoint 类从 Point 类继承了 x 和 y 属性，这意味着 ColorPoint 类中的对象可以访问和使用这些属性。
方法继承：子类继承父类的方法

ColorPoint 类继承了 Point 类中的 toString 方法，这意味着 ColorPoint 类中的对象可以使用该方法。
super 通往父类的桥梁

super 关键字用于访问父类的方法和属性，在 ColorPoint 类的构造函数中，super(x, y) 用于调用 Point 类的构造函数，从而为 ColorPoint 类中的对象设置 x 和 y 属性。