JavaScriptでクラスを継承。親の関数・メソッドを子で呼び出す方法
JavaScriptでクラスを継承し、子クラスを作成。
親クラスの関数・メソッドを子クラスで呼び出したい。
本記事ではこのような悩みを解決。
実装例を元に解説します。
クラスを継承する
// 親クラス
class Intro {
constructor(name) {
this.name = name;
}
hello() {
console.log("初めまして" + this.name + "です。");
}
}
// 子クラスへ継承
class Age extends Intro {}
// 子クラスをインスタンス化
const kasumi = new Age("kasumi","30");
// コンソールにhelloメソッドを出力
console.log(kasumi.hello());
// 初めましてkasumiです。
クラスを継承するコード例です。
Introクラスを元に、Ageクラスを作成。
Ageクラスをインスタス化。
上記クラスから親Introクラスのhelloメソッドを使い、コンソールにテキストを出力してます。
クラスの継承にはextendsキーワードを使います。
extendsの使い方は以下の通りです。
class 子クラス名 extends 親クラス名 {}
上記のように記述する事で親クラスの関数・メソッドを引き継いだ子クラスを定義できます。
親クラスの関数・メソッドを呼び出す
// 親クラス
class Intro {
constructor(name) {
this.name = name;
}
hello() {
console.log("初めまして" + this.name + "です。");
}
}
// 子クラスへ継承
class Age extends Intro {
constructor(name, age) {
super(name);
this.age = age;
}
hello() {
super.hello();
console.log("年齢は " + this.age + "歳です。");
}
}
// 子クラスをインスタンス化
const kasumi = new Age("kasumi", "30");
// コンソールにhelloメソッドを出力
console.log(kasumi.hello());
// 初めましてkasumiです。
// 年齢は 30歳です。
子クラスから親クラスの関数・メソッドを呼び出すコード例です。
親Introクラスのコンストラクタ関数で定義されたnameプロパティを子Ageクラスへ呼び出し。
新たにageプロパティをオブジェクトに追加してます。
また、親Introクラスのhelloメソッドも呼び出してます。
子クラスから親クラスの関数・メソッドを呼び出すにはsuperキーワードを使います。
親のコンストラクタを呼び出す場合
super(…)
親のメソッドを呼び出す場合
super.メソッド名(…)
上記のように使用します。
以上で親クラスの関数・メソッドを呼び出す事が可能になります。
まとめ
JavaScriptでクラスを継承。親の関数・メソッドを子で呼び出す方法について紹介しました。
以上で解説を終わります、
目次