JavaScript prototypeでメソッドを追加するサンプル

JavaScriptのprototype(プロトタイプ)でメソッドを追加するサンプルです。

目次

prototype

関数名 = function(引数){    //無名関数
};
関数名.prototype.メソッド名 = function(引数){
  メソッドの処理
}
変数 = new 関数名(引数);    //インスタンスを生成
  • newで生成するインスタンスにメソッドを連携できます。
  • インスタンス生成元の関数にメソッドが含まれていると、インスタンス生成のたびにメソッドも増えますが、prototypeでメソッドを追加する形にするとメモリの消費分はprototypeで追加した分のみになります。
  • インスタンスを生成した後に、プロトタイプでメソッドを追加しても、インスタンスはそのメソッドを認識できます。
  • 以下は、MDNの継承とプロトタイプチェーンのリンクです。
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain
  • ※厳密にはメソッドではなくプロパティです。

以下は、1から順番の説明になっています。

1.インスタンスを生成する

プロトタイプが出て来る前のシンプルなコードです。

<script>

const Color1 = function(){};

const a = new Color1();

</script>

3行目は、無名関数です。変数に代入しています。
5行目は、newを使用してインスタンスを生成しています。
→3行目はJavaでいうクラスに似ています。

 

2.プロトタイプを使用しない場合

上記1に追記します。
プロトタイプを使用しない場合のサンプルです。

<script>
//プロトタイプを使用しない場合
const Color1 = function(cr){
	this.name = cr;
	this.getName=function(){
	return this.name;
	};
};
const a = new Color1("赤");//インスタンスにgetNameあり
const b = new Color1("黄");//インスタンスにgetNameあり
const c = new Color1("青");//インスタンスにgetNameあり

console.log(a.getName()); //赤
console.log(b.getName()); //黄
console.log(c.getName()); //青

</script>

上記のコードに4-7行目に変数とメソッドの定義を追加しています。
thisは、生成される自身のインスタンスを指します。
9-11行目は、newでインスタンスを生成しています。生成されたインスタンスにはそれぞれgetNameのメソッドが入っています。(合計3つ)
13-15行目は、メソッドを実行して値を表示しています。

 

3.プロトタイプを使用するサンプル場合

上記1に追記します。
プロトタイプを使用する場合のサンプルです。

<script>
//プロトタイプを使用する場合
const Color1 = function(cr){
	this.name = cr;
};

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

const d = new Color1("黒");//プロトタイプのgetNameを参照する
const e = new Color1("白");//プロトタイプのgetNameを参照する
const f = new Color1("緑");//プロトタイプのgetNameを参照する

console.log(d.getName()); //黒
console.log(e.getName()); //白
console.log(f.getName()); //緑

</script>

上記コードからメソッドの定義を削除し、7-9行目にプロトタイプを記述をしています。
11-13行目はそれぞれインスタンスを生成していますが、上記コードのようにインスタンスにgetNameメソッドはありません。
15-17行目のインスタンスはプロトタイプのgetNameメソッドを参照し値を返します。
getNameメソッドがインスタンスごとに生成されないので上記コードに比べてメモリ使用量の節約になります。

 

4.インスタンス生成の後にプロトタイプの宣言がある場合

上記3を変更します。
インスタンス生成の後にプロトタイプの宣言がある場合のサンプルです。

<script>
//プロトタイプを使用する場合
const Color1 = function(cr){
	this.name = cr;
};

const d = new Color1("黒");//プロトタイプのgetNameを参照する
const e = new Color1("白");//プロトタイプのgetNameを参照する
const f = new Color1("緑");//プロトタイプのgetNameを参照する

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

console.log(d.getName()); //黒
console.log(e.getName()); //白
console.log(f.getName()); //緑

</script>

7-9行目でインスタンスを生成しています。
11-13行目は、プロトタイプでメソッドの定義を追加しています。インスタンス生成の後です。
15-17行目の結果は上記コードと同じです。インスタンス生成後にプロトタイプでメソッドの定義を追加しても問題ありません。

 

5.プロトタイプに複数のメソッドを追加する場合

プロトタイプに複数のメソッドを追加する場合のサンプルです。
サンプル2のほうがまとまっていて読みやすくメンテしやすいです。

サンプル1

prototypeを2つ記述しそれぞれにメソッドがあります。

<script>

var Color1 = function(){};

Color1.prototype.getName1=function(){
	return "赤";
}
Color1.prototype.getName2=function(){
	return "青";
}

var a = new Color1();//

console.log(a.getName1()); //赤
console.log(a.getName2()); //青
</script>

サンプル2

prototypeの記述は1つでその中に2つメソッドがあります。

<script>

const Color1 = function(){};

Color1.prototype = {
	getName1: function() {
		return "黄";
	},
	getName2: function() {
		return "緑";
	},
};

const b = new Color1();//

console.log(b.getName1()); //黄
console.log(b.getName2()); //緑

</script>

関連の記事

JavaScript オブジェクトを作成するサンプル
JavaScript 継承のサンプル(プロトタイプチェーン)
JavaScript 連想配列のサンプル

プログラムでつまったらteratailに登録して質問しましょう!↓↓↓

△上に戻る