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

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

説明	prototype(プロトタイプ)
サンプル	１．インスタンスを生成する
	２．プロトタイプを使用しない場合
	３．プロトタイプを使用する場合
	４．インスタンス生成の後にプロトタイプの宣言がある場合
	５．プロトタイプに複数のメソッドを追加する場合

prototype(プロトタイプ)

//step1:
関数A = function(){ //無名関数
};
//step2:処理を追加
関数A.prototype.メソッド名 = function(){
　　メソッドの処理
}
//step3:追加した処理を使用
変数 = new 関数A(); //インスタンスを生成
関数A.追加したメソッド //メソッドを使用

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

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

１．インスタンスを生成する

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

<script>

const Color1 = function(){};

const a = new Color1();

</script>

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

２．プロトタイプを使用しない場合

上記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行目は、メソッドを実行して値を表示しています。

３．プロトタイプを使用するサンプル場合

上記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メソッドがインスタンスごとに生成されないので上記コードに比べてメモリ使用量の節約になります。

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

上記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行目の結果は上記コードと同じです。インスタンス生成後にプロトタイプでメソッドの定義を追加しても問題ありません。

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

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

サンプル１

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>

サンプル２

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>