【JavaScript】class構文の継承方法を解説【super】

という方向けのご紹介です。

執筆者

・独学でキルミーベイベーのゲームを作っている男
・javascriptが大好きな男

『クラス構文』の活用方法

クラス構文は、変数や定数をよりシンプルに活用するための機能です。

その中に「継承」という機能があります。
少しだけコツを覚えるだけでコードをより簡単にまとめることができる便利な機能です。

ちなみに、classの基本的な使い方はこちらでご紹介しておりますので、ご活用ください。class構文の使い方が驚くほどわかる！【オブジェクト指向】

継承　とは

継承を一言で表すと

となります。

継承、の言葉通りデーターを引き継ぐことです。
ゲームで言えば強いキャラのスキルを他キャラにピンポイントで引き継がせる、とイメージいただくとよいと思います。

継承には主に「extends」「super」の2つの方法があります。

extendsだけでも即効性があり、シンプルに使えやすいですが、
今回はより応用的なsuperについて解説します。

extendsについてはこちらで解説していますので、ご活用ください。
【JavaScript】class構文の継承方法を解説【extends】

super の使い方

「super」について説明します。

サンプルコード見てましょう。
初めは「羽生善治」、3秒経過で「藤井聡太」が表示されますね。

superは継承元のコンストラクタ、メソッドを引き継ぐことができます。
こちらが引継ぎ元のhabu(羽生)クラスです。

class habu{
　constructor(myname){
　　this.name = myname;
　}
　returnName(myname){
　　this.name = myname;
　　return this.name;
　}
}

コンストラクタ：this.name/メソッド:returnName が設定されています。
これをhuzii(藤井)クラスでも使えるように設定します。}

順番に見ていきましょう。

super でコンストラクタを継承する

該当する部分がこちら

class huzii extends habu{
　constructor(myname){
　　super(myname)
　
　　Change.textContent = this.name;
　　Message.textContent = this.name;
}

「super(myname)」と記述しているのが分かると思います。
これだけで親クラス「name」プロパティに「myname」を定義できます。

定義、つまり引き継ぐことができますので…
わざわざ新しく[this.name = myn…]と記述する必要がなくなるのです！

これで親クラスのプロパティを自由に使うことができます。

super でメソッドを継承する

メソッドも考え方は全く同じです。

該当部分はこちら

showName(){
　Change.textContent = '『私の名前は' + super.returnName("藤井聡太") + 'です』';
　Message.textContent = '『私の名前は' + super.returnName("藤井聡太") + 'です』';
}

という時に是非使ってみてください。

まとめ

最後に、クラス構文のsuperについてまとめます。