コアJavaScript(ECMAScript)の図書室 36冊目【JavaScript】[ECMAScript] プロトタイプオブジェクト

トップページ
特集PC技術
コアJavaScript(ECMAScript)の図書室
36冊目【JavaScript】[ECMAScript] プロトタイプオブジェクト

コアJavaScript(ECMAScript)の図書室

36冊目【JavaScript】[ECMAScript] プロトタイプオブジェクト

今回はJavaScriptのオブジェクト指向のうちプロトタイプオブジェクトの解説をします。
JavaScriptのオブジェクト指向で動作の違和感は私が思うにこれが要因だと考えています。

[1] プロトタイプオブジェクトとは

JavaScriptオブジェクトにはプロトタイプオブジェクトという参照機能があります。
このプロトタイプオブジェクトを自由に参照して使うことができます。
全ての関数が定義時に自動的にプロトタイプオブジェクトを持ちますので自由に使えます。
プロトタイプオブジェクトに追加された値は追加されたクラスを持つインスタンス全てから使えるようになります。
次の項目より、プロトタイプオブジェクトの利点や特徴などを説明していきます。

[2] プロトタイプオブジェクトを使うとメモリの削減ができる

プロトタイプオブジェクトに追加された値はインスタンスから参照することができます。
つまり、共有化することができるためメモリの削減ができるようになります。

function Human(name){
	this.name = name;
}

// Humanクラスより作成されたインスタンス全てで共有できる
Human.prototype.age = 20;

var hopsii = new Human("ほぷしぃ");
var pcsp = new Human("PC特集技術");

// 同じ値が出力されます。
document.writeln(hopsii.age);	// 20
document.writeln(pcsp.age);		// 20

プロトタイプオブジェクトはクラスにおいて共通のものによく使われます。
例えば、共通の値(定数)や、メソッドに使われます。
メソッドに使われる理由はメソッドは基本的に同じ処理をするためです。

[3] プロトタイプオブジェクトは参照するときだけ使われる

プロトタイプオブジェクトは全てのインスタンスから参照できることを説明しました。
上のプログラムを見ていただければわかると思いますが
定義時には、「Human.prototype.age」としているのに実際に参照するときは「hopsii.age」としています。

function Human(name){
	this.name = name;
}

// Humanクラスより作成されたインスタンス全てで共有できる
Human.prototype.age = 20;

var hopsii = new Human("ほぷしぃ");
var pcsp = new Human("PC特集技術");

// 片方のインスタンスのプロパティを変更してみた
hopsii.age = 30;

document.writeln(hopsii.age);	// 30
document.writeln(pcsp.age);		// 20

インスタンスプロパティを変更した「hopsii」は値が書き換わりました。
「pcsp」で出力される値はプロトタイプオブジェクトで定義した値を参照しています。
このプロトタイプオブジェクトはアクセスされる優先度があるのです。
「hopsii」の場合はインスタンス自身に値(30)があるのでこちらを参照します。
「pcsp」の場合はインスタンス自身に値がないため、プロトタイプオブジェクトの値(20)を参照します。
１番優先度が高いのはインスタンス自身が持つ値です。
ついで優先度が高いのがプロトタイプオブジェクトになるわけです。

[4] プロトタイプオブジェクトの書き方のいろいろ

ここではプロトタイプオブジェクトの書き方について説明をします。
何度もしつこいようですが、JavaScriptは柔軟な言語なので書き方が複数あります。
主に２種類の方法がありますが、リテラル表現による書き方をお勧めします。
リテラル表現の書き方にすると、コードの可読性がよいので後で見直したときにわかりやすいはずです。

ドット(.)を使用した方法

// プロトタイプオブジェクトの書き方その１
// ドット(.)を使用した方法
Human.prototype.age = 20;
Human.prototype.introduce = function(){
	document.writeln("私の名前は" + this.name + "です");
};
Human.prototype.good_morning = function(){
	document.writeln("おはようございます。");
};

1つずつ指定する方法です。クラス名.prototype.プロパティと記述します。
少ない場合にはこれでも問題ないかもしれませんが、たくさんのプロパティを持つ場合
管理が大変になることが予想されます。

リテラル表現を使用した方法

// プロトタイプオブジェクトの書き方その２
// リテラル表現を用いた方法
Human.prototype = {

	age : 20,

	introduce : function(){
		document.writeln("私の名前は" + this.name + "です");
	},

	good_morning : function(){
		document.writeln("おはようございます。");
	},
};

リテラル表現(キーとバリューの組み合わせ)による書き方です。
Humanクラスのプロトタイプオブジェクトの範囲が見やすいと思います。
また、クラス名(Human)という名前を変えたいときにも直しやすいはずです。