【初心者向け】JavaScriptの継承とは? 使い方を解説!

こんにちは、ライターのまなたけです。

この記事ではJavaScriptプログラミングでよく使用される「継承」について、使い方やサンプルプログラムを紹介します。

オブジェクト指向プログラミングを学習する中で、よく見かける「継承」という文字。JavaScriptにも「継承」の概念が組み込まれています。

しかし、JavaScriptプログラミングを学び始めた方の中には、「継承」の使い方やプログラミング方法がよく分からないという方も多いのではないでしょうか?

この記事を読んで、JavaScriptの継承について理解を深めていきましょう。

JavaScript「継承」とは?

まずは「継承」の概念について説明をします。

継承はオブジェクト指向プログラミングでは重要な概念の1つです。

継承とは、あるクラスから継承して別のクラスを作成することを指します。

オブジェクト指向の場合、継承元となるクラスを「スーパークラス(親クラス)」、継承して作成した新たなクラスを「サブクラス(子クラス)」といいます。

「継承」を使うメリットは、同じような機能をひとまとめのクラスにすることで、重複したコードを書かずに済むからです。これによってコーディング量が減り、読みやすいコードを書くことができます。

JavaScriptも同様に、「継承」を使うことで、親クラスから引き継いだ子クラスを新たに作成することができます。

JavaScript「継承」の方法

ここでは、JavaScriptの継承の方法を紹介します。

prototypeプロパティを使った継承

ま図はprototypeを使った継承の方法です。

prototypeの記述方法は以下の通りです。

以下にサンプルコードを用いて説明します。

実行結果は以下の通りです。

実行結果を見ると、「shain」オブジェクトを継承して新たに「ichiro」オブジェクトが新たに生成されていることが分かります。

callメソッドを使った継承

次に紹介するのはcallメソッドを使った 継承です。

まずは以下のサンプルコードを実行します。

実行結果は以下の通りです。

実行結果を見ると、先の例で「鈴木一郎」と表示されていたのが、「undefined」となってしまいました。

これは、上記のサンプルコードの方法では、継承元の初期値は引き継ぎません。このため、undefinedと表示されたのです。

この場合、以下のようにcallメソッドを使用することで、継承元の初期値を引き継ぐことができます。

実行結果は以下の通りです。

上記の通り、継承元の初期値を引き継ぎ、パラメタとして指定した氏名が表示されました。

callメソッドの第1パラメタには「this」を指定します。このthisは、コンストラクタで指定したthisを参照します。第2パラメタには文字列を受け取るための変数を指定します。

そして、prototypeプロパティを使用してshainとshain1の両方を引き継いだ新たなオブジェクト「ichiro」を生成しています。

Object.createメソッドを使った継承

次に紹介するのは「Object.create」メソッドを使った方法です。

Object.createは、既存オブジェクトのプロトタイプを使用して、新たなオブジェクトを生成するメソッドです。

「callメソッドを使った継承」で使用したサンプルコードを、Object.createを使って書き換えると以下のようになります。

実行結果は以下の通りです。

上記の例では、「new shain()」を「Object.create(shain.prototype)」に置き換えています。

この例からも分かるように、Object.createを使ってshainコンストラクタの機能を引き継ぎ、shain1オブジェクトを生成することができます。

extendsを使った継承

クラスを継承する場合は「extends」を使って行います。

まずは以下のサンプルコードをご覧ください。

実行結果は以下の通りです。

この例では「shain1」クラスをextendsを使って「shain2」クラスに継承しています。

そして、「shain1」「shain2」を継承した「shain」オブジェクトで、「shainName1」「shainName2」メソッドを用いてconsole.logで出力しています。

ここのポイントは「継承したクラスは再実装することなく、親クラスの機能を使用できる」という点です。

superを使った継承

親クラスのコンストラクタやメソッドを実行する場合には「super」を使用します。

ここでは親クラスのコンストラクタを用いて実行するサンプルコードを紹介します。

実行結果は以下の通りです。

この例では、親クラス「shain1」を引き継いだ「shain2」のコンストラクタ内に「super(n)」を記述しています。

これによって、superで親クラスのコンストラクタを実行します。

まとめ

いかがでしたでしょうか?

今回は、JavaScripの「継承」について説明しました。

「継承」はJavaScriptプログラミングを行う上で、重要な概念の1つです。まとめると、以下のようになります。

  • 「継承」とは、別のオブジェクトの機能を引き継いで使用すること
  • JavaScriptの継承には、「prototype」「call」「Object.create」を使った方法がある
  • classの継承では「extends」「Super」を使って行う

この記事で紹介した使い方を参考にしながら、JavaScriptの継承の理解に役立つと嬉しいです。

 

 

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?