クラスを拡張する

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.
拡張するクラスの親として機能します。
拡張するクラスの子として機能します。
親クラスのプロパティとメソッドを継承します。