JavaScript プロトタイプのサンプル(prototype)

JavaScriptのプロトタイプのサンプルです。

目次

1.コンストラクタ

まずプロトタイプが出て来る前のシンプルなコードです。
3行目は、コンストラクタです。コンストラクタの名前の最初の文字は大文字にします。5行目でnewを使用してインスタンスを生成しているので3行目はJavaでいうクラスに似ています。このコードに追加していきます。

<script>

var Color1 = function(){};

var a = new Color1();

</script>

2.プロトタイプを使用しないサンプル

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

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

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

</script>

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

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

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

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

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

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

</script>

4.プロトタイプを使用するサンプル2

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

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

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

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

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

</script>

5.プロトタイプの複数のメソッドの定義の記述法

プロトタイプに複数のメソッドの定義があるときの記述法です。
5-10行目と20-27行目は、ともにプロトタイプに2つメソッドの定義があります。
20-27行目のほうがまとまっていて読みやすくメンテしやすいです。

<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()); //青

//------------------------------------------------
var Color2 = function(){};

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

var b = new Color2();//

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

</script>

以下は、MDNのObject.prototypeのページのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

関連の記事

JavaScript 継承のサンプル(プロトタイプチェーン)
JavaScript 無名関数と即時関数のサンプル
JavaScript クロージャのサンプル
JavaScript 高階関数のサンプル

 

 はまったらエンジニア特化型Q&Aサイト
【teratail(テラテイル)】で質問しましょう!


△上に戻る