JavaScript

【JavaScript】superの使い方【クラス継承】

どうも、つよぽんです!

今回は、JavaScriptのクラス継承で使われれる「super」について解説します。

今回の記事は次のような方に向けて書きました。

想定読者
  1. オブジェクト指向がどういうものかざっくりとでもイメージが付いている
  2. JavaScriptでクラス・インスタンスを作成できる
  3. クラス継承の方法を理解している

この記事を読み終えた後のあなたは次のことがわかるようになっています。

この記事を読み終えた後のあなた
  • JavaScriptのクラスの「super」の使い方がわかるようになる

今回の記事の内容は以下の解説記事でも使っているスライドの内容をさらに詳しく解説したものとなります。

あわせて読みたい
【JavaScript】superを使う ~クラス継承の1機能~JavaScriptで継承関係にある親クラスと子クラスで、子クラス内から親クラスのメソッドを実行したい場合は「super.メソッド名()」とすることで実行することが出来ます。superを使う場面は主には親クラスに定義したメソッドを子クラスでオーバーライドしたときに利用します。...

それでは以下の内容で話を進めていきます。

今回の内容
  1. superとは?
  2. JavaScriptでのsuperの使い方
  3. JavaScriptコードを書いてsuperの挙動を確かめる

superとは?

superは親クラスのことをいう

super」キーワードはクラス継承でのみ使われる機能となります。

前回記事「【JavaScript】クラスで継承する方法【コード付き】」でも解説したとおり、クラスの継承を行うには2つのクラスを使い、それぞれを「親クラス」と「子クラス」に分けます。

このときに、「super」とは子クラスから見た親クラスのことを指します。

superが使われる場面

結論から言うと、子クラスから親クラスのメソッドを実行したいときにsuperを使います

この説明だけだとまだわからないかと思うので、具体例をまじえて解説します。

前回記事でも話したとおり、子クラスは親クラスのメソッドを引き継ぎます。

例えば、親クラスで「speak」メソッドが実装されていて、子クラスで「speak」メソッドが実装されていなくても、子クラスは親クラスの「speak」メソッドを継承で引き継いでいるので実行することが出来ます。

では、親クラスと子クラスの両方で「speak」メソッドが実装されている場合はどうなるでしょう?

このときは、親クラスの「speak」メソッドは、子クラスの「speak」メソッドに上書きされたことを意味します。

親クラスのメソッドを子クラスで上書きすることを「オーバーライド (override)」とも呼びます。

オーバーライドされた親メソッドは実行できなくなるのでしょうか?

結論から言うと、オーバーライドされた親メソッドは子クラス経由で実行できます

子クラス経由で」という部分で「super」を使うわけです。

super」の使い方は次の章で解説します。

JavaScriptでのsuperの使い方

superの使い方は以下の画像にまとめたので、まずはそちらを参考にしていただけたらと思います。

クラス継承のsuperの使い方クラス継承のsuperの使い方

ここで注目してほしいのは、「constructor」と「constructor以外のメソッド」でsuperを使ったメソッドの呼び出した方が異なるという部分です。

それぞれの呼び出し方については以下にまとめました。

  • constructor : 「super()」で親クラスのconstructorを実行する
  • constructor以外のメソッド : 「super.メソッド名()」で親クラスのメソッドを実行する

それでは、実際に「super」を使ったサンプルコードを次の章で見ながら、もっと「super」のイメージをつけていきましょう。

JavaScriptコードを書いてsuperの挙動を確かめる

下の画像で使われているサンプルコードはクラス継承を実装したものになります。(画像をクリックすると別タブで画像が開きます)

superを使ったサンプルコードsuperを使ったサンプルコード

上の画像のサンプルコードは以下のリンクから直接確認できます。

superの挙動の確認

上のサンプルコードの内容をマネして書くでも構わないので、「super」の書き方を定着させるために、一度自分の手で「super」を使ったクラス継承を実装することをオススメします。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • superは子クラスから見た親クラスを指す
  • superは「オーバーライド」された親クラスのメソッドを子クラス経由で実行したいときに使う
  • superの使い方は「constructor」と「constructor以外のメソッド」で異なる

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
【JavaScript】superを使う ~クラス継承の1機能~JavaScriptで継承関係にある親クラスと子クラスで、子クラス内から親クラスのメソッドを実行したい場合は「super.メソッド名()」とすることで実行することが出来ます。superを使う場面は主には親クラスに定義したメソッドを子クラスでオーバーライドしたときに利用します。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です