【初心者向け】JavaScript prototypeの使い方と継承

こんにちは、直也です。
プログラミングの学習は捗っていますでしょうか?

さて、本題に入りたいと思います。

JavaScriptで頻繁に使用されるprototype(プロトタイプ)
prototypeを使う目的や使い方がよくわかっていない方も少なくないのでは、、、。

と思い、今回はJavaScript prototypeを使う用途についてサンプルコードを交えながら分かりやすく説明していきます。

JavaScriptを学び始めた方や、JavaScript prototypeの使い方やJavaScript のオブジェクト指向の継承についてよくわからない方は、ぜひ読んでみてください。

prototypeとは

プロトタイプとは、「オブジェクト」のことです。JavaScirptでは、すべてのオブジェクトが「プロトタイプ」をベースに作られています。「プロトタイプ」と呼ばれる最小のオブジェクトがあり、それをコピーすることで新しいオブジェクトを作ります。

  • このプロトタイプは、オブジェクト同士のつながりを保持する機能もあるため「継承」も簡単に行えます(詳しくは「3 prototypeによる継承」で解説します)。

prototypeの使い方

prototypeを使ってメソッドを追加する

プロトタイプの一般的な記述方法(メソッドを追加する方法)は、以下のとおりです。

【構文】

prototypeの実用例

では、実際にプロトタイプにメソッドを追加してみましょう。クラスPersonのprototypeに、greetメソッドを追加しています。生成したオブジェクトperson1から、greetメソッドが実行できることが確認できます。

【prototypeへのメソッドの追加】

クラスPersonのプロパティにgreetメソッドを追加する。

オブジェクトに対してプロトタイプのメソッドを呼び出せる。

prototypeによる継承

ここでは、プロトタイプを活用した「継承」のしくみについて解説していきたいと思います。先に記述したサンプルコード(prototypeへのメソッドの追加)にオブジェクトをひとつ追加しました。
【prototyepによる継承(サンプルコード)】

JavaScriptの継承によりどちらのオブジェクトも追加したメソッド(greet)を参照することができます(下図参照)。そうすることで、確保するメモリの容量を節約することができます。

また、このようにひとつのクラスに対していくものオブジェクト間でprototypeメソッドを参照できる構造のことをプロトタイプチェーンといいます。

まとめ

いかがでしたか?今回はサンプルコードを交えながらJavaScript prototypeを使う目的や使い方について説明しました。

JavaScript prototypeを使う目的や使い方について理解いただけたでしょうか?量をこなしていくと簡単に使えることができる日が来ると思うので、焦らずにゆっくりと理解を深めていってくださいね。

この記事が、JavaScriptのオブジェクト指向(JavaScript prototype)の学習に少しでも役立つと嬉しいです。

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

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