クラスを拡張する

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 の暗黙的コンストラクタは、同じ引数セットとともに親コンストラクタを呼び出します。ただし、サブクラスにコンストラクタがある場合は、this を参照する前に、まず必要な引数とともに super() を呼び出す必要があります。

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 }

ゲッターとセッターは、それぞれ値の取得と定義専用の特別なメソッドです。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 キーワードで作成されたクラスに関する正しい説明を選択してください。

このクラスは、拡張するクラスの子として機能します。

このクラスは、親クラスのプロパティとメソッドを継承します。

このクラスが拡張するクラスの親として機能します。

It can't overwrite methods from a parent class.