JavaScriptのオブジェクト指向 (6/7)

オブジェクトの拡張には、実は継承の他にも方法があります。それは「プロトタイプ」を使った方法です。

プロトタイプというのは、JavaScriptで使われるすべてのオブジェクトに用意されている「特別なオブジェクト」です。JavaScriptでは、オブジェクトを作成すると、自動的に「prototype」というプロパティが作成されます。ここに、プロトタイプという特別なオブジェクトが設定されます。

このprototypeには、同じコンストラクタで作成されたオブジェクトでは、すべて共通のオブジェクトが設定されます。ということは？　このプロトタイプを修正すると、同じコンストラクタで作成された全オブジェクトの機能がすべて変わってしまう、というわけです。


では、実際にプロトタイプを使ったサンプルを下のリストに掲載しておきましょう。ここでは、MyDataObjectのオブジェクトを作成後、プロトタイプを使い、setNameというメソッドを追加しています。すると、既に作成済みのobj1にも、ちゃんとsetNameメソッドが用意され使えるようになってしまうことがわかります。


この「プロトタイプによる拡張」の最大のメリットは、「既にあるオブジェクトも操作できる」という点でしょう。これは、自分で作ったオブジェクトに限りません。JavaScriptに用意されているオブジェクトも、プロトタイプで操作できるのです。

簡単な例を下のリストにあげておきます。var str = "Hello!";というようにテキストを変数strに設定した後、showDataメソッドを呼び出すと、そのテキストと文字数を表示します。ここでは、

String.prototype.showData = function(){……}

このようにして、StringオブジェクトのプロトタイプにshowDataというメソッドを追加することで、すべてのテキストにshowDataメソッドを追加しています。このように、プロトタイプを使えば、JavaScriptにあるテキストなどの性質さえ変えてしまうことが可能なのです。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※サンプルスクリプト

<script type="text/javascript">
<!--
function MyDataObject(name,age,mail){
	this.name = name;
	this.age = age;
	this.mail = mail;
	
	this.showData = function(){
		var result = '名前：' + this.name + '\n';
		result += '年齢：' + this.age + '歳\n';
		result += 'メール：' + this.mail;
		alert(result);
	}
}

var obj1 = new MyDataObject('山田太郎',18,'taro@yamada');
MyDataObject.prototype.setName = function(){
	this.name = prompt("新しい名前を入力：");
}
obj1.setName();
obj1.showData();
//-->
</script>


※テキストにメソッドを追加する

<script type="text/javascript">
<!--
String.prototype.showData = function(){
	var res = '文字列：' + this;
	res += '\n文字数：' + this.length;
	alert(res);
}

var str = "Hello!";
str.showData();
//-->
</script>