扩展类

extends 关键字在类声明或表达式中用于创建一个类，该类充当另一个类的子类，父类（有时称为“基类”）充当子类（有时称为“子类”或“派生类”）的原型。

class ParentClass {}
class ChildClass extends ParentClass {}

Object.getPrototypeOf( ChildClass );
> class ParentClass {}

这些子类继承父类的属性和方法。这使您可以扩展类的核心功能以服务于更具体的目的，而无需重载父类以适应所有可能的用例，或重新实现服务于类似目的的代码。

子类可以提供从父类继承的方法的自己的实现

class MyClass {
  constructor( myPassedValue ) {
    this.instanceProp = myPassedValue;
  }
  classMethod() {
    console.log( `The value was '${ this.instanceProp }.'`)
  }
}
class ChildClass extends MyClass {
  classMethod() {
    console.log( `The value was '${ this.instanceProp },' and its type was '${ typeof this.instanceProp }.'`)
  }
}

const myParentClassInstance = new MyClass( "My string." );
const mySubclassInstance = new ChildClass( 100 );

myParentClassInstance.classMethod();
> "The value type was 'string.'"

mySubclassInstance.classMethod();
> "The value was '100,' and its type was 'number.'"

您还可以在子类的上下文中，使用 super 调用在父类上定义的方法

class MyClass {
  constructor( myPassedValue ) {
    this.instanceProp = myPassedValue;
  }
  classMethod() {
    console.log( `The value was '${ this.instanceProp }.'`)
  }
}

class ChildClass extends MyClass {
  subclassMethod() {
    super.classMethod();
    console.log( `The value type was '${ typeof this.instanceProp }.'`)
  }
}
const mySubclassInstance = new ChildClass( 100 );

mySubclassInstance.subclassMethod();
> The value was '100.'
> The value type was 'number.'

如前面的示例所示，当在子类的上下文中省略 constructor() 方法时，JavaScript 的隐式构造函数会使用相同的参数集调用父构造函数。但是，如果子类中存在构造函数，则它必须首先使用任何必要的参数调用 super()，然后才能引用 this。

class MyClass {
  constructor( myPassedValue ) {
    this.instanceProp = myPassedValue;
  }
  classMethod() {
    console.log( `The value was '${ this.instanceProp }.'`)
  }
}

class ChildClass extends MyClass {
    constructor( myPassedValue ) {
        super( myPassedValue );
        this.modifiedProp = myPassedValue + 50;
    }\
    subclassMethod() {
        super.classMethod();
        console.log( `The value type was '${ typeof this.instanceProp }.'`)
    }
}
const mySubclassInstance = new ChildClass( 100 );

mySubclassInstance;
> MyClass { instanceProp: 100, modifiedProp: 150 }

Getter 和 Setter 是专门用于分别检索和定义值的特殊方法。使用 get 和 set 关键字定义的方法允许您创建可以像静态属性一样与之交互的方法。

class MyClass {
    constructor( originalValue ) {
        this.totalValue = 0;
    }
    set doubleThisValue( newValue ) {
        this.totalValue = newValue * 2;
    }
    get currentValue() {
        console.log( `The current value is: ${ this.totalValue }` );
    }
}
const myClassInstance = new MyClass();

myClassInstance;
> MyClass { totalValue: 0 }

myClassInstance.doubleThisValue = 20;

myClassInstance.currentValue;
> The current value is: 40

get 和 set 属性在类的原型属性上定义，因此可供该类的所有实例使用。

检查您的理解

选择关于使用 extends 关键字创建的类的正确陈述。

它充当它扩展的类的子类。
它继承其父类的属性和方法。
它充当它扩展的类的父类。
它不能覆盖父类的方法。