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.