クラスを拡張する

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 }

ゲッターとセッターは取得と定義にのみ使用される特別なメソッド設定します。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.