こんにちは、大学院でIT系の研究を専攻している、ひらりんです。
JavaScriptは、Webページにて様々な機能を搭載したり、操作する際に使用されるプログラミング言語です。JavaScriptによって、ゲーム作成やサイトを動的にすることができ、フロントエンジニアを始めとした、プログラミング初学者など、多くの人におすすめしたい言語のひとつです！
本記事では、JavaScriptのプロトタイプについて説明します。JavaScriptを少し勉強したりすると、「コンストラクタよりインスタンスを作る」などといった操作が出てきます。その時に、プロトタイプについて理解していると、プログラムの冗長化するのを防ぐことができるなどのメリットがあります。しかし、他の言語には同様の機能がなかったりするため、使いこなすのは難しいですよね。
JavaScriptのプロトタイプについて、メソッドの使い方や基本構文に加えて、実際のプログラム使用例まで説明するので、JavaScriptの学習を始めた方や、プログラムを書く予定の人はぜひ読んでみてください！
目次
JavaScriptのプロトタイプ
そもそも、JavaScriptのプロトタイプとは、どのようなものなのでしょうか。簡単に説明すると、プロトタイプは「継承」したいときに適したメソッドです。
継承は、オブジェクト指向の言語にて登場する概念です。オブジェクトとは、属性と付随するデータが一緒になっているものを指します。このオブジェクトに持たせたい機能を、同じ機能を持っている他のオブジェクトから引き継いだり利用したいときに、継承を使うようにすると、とても便利です。
なお、JavaScriptのオブジェクトなどがよくわかっていない方は、以下の記事を参考にしてください！
参考 JavaScriptのオブジェクトの基本！使い方や注意点も解説ウェブカツ ブログオブジェクト毎にいちいち新しく定義していると、いざ変更点が生じたときにすべて直す必要がありますし、その分エラーも発生しやすくなります。そこで、プロトタイプを使ってプログラムを書くと、継承元を直してしまえば、すべてに反映されるので、エラー発生率も抑えられるうえに、プログラムの冗長化を防げます！
プロトタイプを使用すると、メモリの消費を抑えられる！
プロトタイプを使用してプログラムを書くことのメリットとして、メモリの消費を抑えられることが挙げられます。
プログラム初心者のうちは、そこまで煩雑な内容ではないので、プロトタイプでなくnew演算子ですべて書いても、そこまで影響ありません。しかし、メソッドを数百・数千持つようなオブジェクトから、何個もインスタンスを作成しようとすると、メソッドの数に比例して無駄なメモリを消費するため、余分なメモリをたくさん使うことになります。
new演算子について詳しく知りたい方は、以下の記事を参考にしましょう。
参考 【初心者向け】JavaScriptでのクラス定義を徹底図解｜定義方法＆使い方ウェブカツ ブログnew演算子では、インスタンスを作成するたびにメソッドをコピーしているので、余計なメモリを浪費していることになります。その点、プロトタイプで書くと、コピーするのではなくあくまで「参照」なので、メモリの消費を防ぐことができます。
プロトタイプの書き方
それでは、プロトタイプを用いたメソッドの定義の仕方について説明します。まずは、一般的なメソッドの書き方からおさらいしましょう。
プロトタイプを使わないでメソッドを定義
|
1 2 |
// プロトタイプを使わないでメソッドを定義 オブジェクト名.メソッド名 = function(){ // 処理内容 }; |
プロトタイプを使用せずにメソッドを定義する場合は、このような構文となります。オブジェクト名の直後にメソッド名を記述し、その内容をfunction内に書きます。こうすることで、メソッドは定義できますが、インスタンスを生成するたびにメソッドもコピーされます。
プロトタイプを使用してメソッドを定義
|
1 |
オブジェクト名.prototype.メソッド名 = function(){ // 処理内容 }; |
プロトタイプを使ってメソッドを定義する場合は、このように記述します。先ほどは、オブジェクト名の直後にメソッド名を記述していましたが、プロトタイプを使用する際は、間に“prototype”とさえ記述すればおっけーです。
このようにすることで、インスタンス生成時にメソッドは「コピー」はされすに、「参照」されるプロトタイプとなります。
プログラムを書いてみよう
それでは、プロトタイプを使用してないプログラムと使用したプログラムをそれぞれ書いてみましょう。まずは、プロトタイプを使用していないプログラムを書き、その後同じ結果を出力するプログラムをプロトタイプを用いて記述します。コピーと継承の違い等を中心に説明していきます！
プロトタイプを用いていないコード例
|
1 2 3 4 5 6 7 8 |
function Favorite(food) { this.preference = function(food) { console.log("好きな食べ物："+food); }; }; var Taro = new Favorite("Fish"); Taro.preference(); // "好きな食べ物：Fish"と表示される |
まずはプロトタイプを用いないで、メソッドを定義したプログラムです。上から順に見ていきましょう。
1～5行目でコンストラクタのFavoriteを宣言します。なお、コンストラクタ名は先頭を大文字にします。2行目では、プロパティのfoodを受け取って処理するpreference関数が定義されていますね。
このコンストラクタのFavoriteを、new演算子を用いてインスタンスのTaroを7行目で作成します。ここで、コンストラクタのFavorite内の処理についてですが、new演算子を用いるたびに、毎回空のオブジェクトが作成されてしまいます。さらに、毎回preference関数を定義してしまうため、無駄なメモリを消費してしまう原因となります。
そして、最終的に8行目が実行されて、「好きな食べ物：Fish」と表示されるようになっています。
では、同様のプログラムをプロトタイプを用いて書いた例を見てみましょう！
プロトタイプを用いた例
|
1 2 3 4 5 6 7 8 9 |
function Favorite(food) { this.food = food; }; Favorite.prototype.preference = function() { console.log("好きな食べ物："+this.food); }; var Taro = new Favorite("Fish"); Taro.preference(); // "好きな食べ物：Fish"と表示される |
では、プロトタイプを用いたプログラムを見てみましょう。ここでは、コンストラクタのFavorite内では、プロパティの宣言のみになっています。
4行目では、Favoriteのプロパティを引き継いだ関数のpreferenceが定義されています。ここで、プロトタイプが使用されていますね。
このようにすることで、8行目でインスタンスを生成した際も、preference関数を余分にコピーすることなく、9行目で先ほどと同様に「好きな食べ物：Fish」と表示させられらます！
まとめ
いかがでしたでしょうか？今回は、JavaScriptのプロトタイプについて説明しました。
JavaScriptには、このように他の言語と少し異なる「参照」という役割を果たすプロトタイプなどが用意されており、工夫次第でエラーの少ない効率的なプログラムを作れます。ぜひ、JavaScriptのプロトタイプについて理解し、Webサービス作成やシステム構築に活かしてください。
