【JavaScript】prototypeの使い方を初学者向けに解説

筆者
・独学でゲームを作っている男
・javascriptが大好きな男

prototype　とは

prototypeはすべてのオブジェクトの一番小さいテンプレートです。

すべてのオブジェクトは「プロトタイプ」を元に作成されます。
このプロトタイプは最小のテンプレートです。

この最小のテンプレ(=下書き・記入欄・様式などをイメージください)からコピーして、オブジェクトを作ることができます。

よりイメージしやすくするため、実際のコードをみてみましょう。

prototype　を使う時

prototypeはコンストラクタと一緒にメソッドを定義するときに使います。
コンストラクタって何?という方の為におさらいしてみましょう。

コンストラクタを使おう！

コンストラクタはオブジェクトを作る際の記述
記述するのは初期化(=最初の値はこれですよ)を宣言するためです。

function player(name,age){
this.name = name;
this.age = age;
}

var tanaka = new player("田中","38");
console.log(tanaka)

//cosole.log の結果//
{"name": "田中","age": "38"}

上記のコードはそれぞれ以下になります。

コードを日本語訳すると、このようになるでしょうか。

「オブジェクトplayerを設定し、コンストラクタでnameとageをそれぞれ設定しました。最後にインスタンスtanakaを作成しました」

このコンストラクタに、メソッドを追加したい時にprototypeの出番となります。

prototype　の使い方

プロトタイプの基本の記述方法です。

function player(name,age){
this.name = name;
this.age = age;
}

player.prototype.getName = function(){
return this.name;
}

player.prototype.getAge = function(){
return this.age;
}

//インスタンス生成//
var tanaka = new player("田中","38");

//cosole.log//
console.log(tanaka.getName());
console.log(tanaka.getAge());

//cosole.log の結果//
"田中"
"38"

prototype　のメリット

prototypeのメリットは不要なメモリ消費を抑えることができる点です。
インスタンス化される際に「複製」ではなく「参照」される為、メモリの圧迫を予防できるという仕組みです。

しかし、目に見えない利点も大きいですが「メソッドをまとめて簡潔に設定できる」という直接的な利点もあります。

prototype　で複数メソッドを定義しよう

メソッドを設定したところをもう一度見てみましょう。

//メソッド部分だけを抜粋
player.prototype.getName = function(){
return this.name;
}

player.prototype.getAge = function(){
return this.age;
}

2つのメソッド、getName・getAgeを定義しています。

しかし、このメソッドの定義を20個作らないといけない場合、管理がとても大変です。
一例ですが、オブジェクト名が「player」⇒「enemy」に変わるだけでも20か所変更しないといけません。

プロトタイプにはこれを解決する機能がございます。

function player(name,age){
this.name = name;
this.age = age;
}

player.prototype = {
getName:function(){
return this.name;
},
getAge:function(){
return this.age;
}
}

player.prototype の後にオブジェクト形式で処理方法を設定しています。
これで全く同じ挙動をしてくれますので、オブジェクト名が変わっても安心ですしコード量も少なくてすみます。

prototype のまとめ

最後にポイントをおさらいしましょう。

prototypeは特定のオブジェクト、例えばゲームの自機などを設定するのに特に便利な機能です。

当記事がjavascriptでゲームを作る時の助けになれば幸いです。