Javascriptのオブジェクトの基本：オブジェクトの動的な変更

Javascript prettyPrint

前回のログ『prettyPrint.jsを試してみた』では、

var test = {
		_arr 	: ["pretty","print"],
		_rear	: [["pretty","print"]],
		_reobj	: {	"a":"pretty",
				"b":{"b1" : "print"}},
		_func 	: function(_str){
			alert(_str);
			return;
		}
};

という簡単なオブジェクトを、prettyPrint.jsでダンプした。

つい最近、mezawa氏とJavascriptのオブジェクトについて、簡単な会話をかわした。
このprettyPrint.jsがなかなか面白いので、試用を兼ねて、Javascriptでいう「オブジェクト」を操作してみた。


Javaのプログラマだと、クラス定義はある意味絶対であって、プログラム的に（実行時に動的に）その構造を変えることはできない、という感覚がある。reflectionであるとか、その応用形としてのAOPみたいなものはあるが、こういった感覚がある（と思う）。

この感覚は、Javaがコンパイルを必要とする言語であることと関係があると思うが、この点、スクリプト言語であるJavascriptでは、オブジェクトは相当にフレキシブルに操作できる（注記：ここでは、オブジェクト、クラスという言葉を同義で使った）。

たとえば、

var test = {
		_arr 	: ["pretty","print"],
		_func 	: function(_str){
			     alert(_str);
			     return;
		          }
};


は、典型的なJavascriptのオブジェクトであるが、これはスクリプト実行中に動的に生成することができる（以下）。

/*
 * オブジェクト操作のサンプル
 */

// 空のオブジェクトを作る。
var test = {};

//プロパティーを足していく
test._arr = ["pretty","print"];
test._func = function(_str){
	alert(_str);
	return;
}


論より証拠で、以下のコード作って実行してみると、プロパティー（もしくは、プロパティーとしての関数）が動的に追加されることが確認できる。
(1)は、追加した_func()が機能することを確認するためのalert文。(2)は、上の方法でオブジェクトを動的に生成した結果をprettyPrint.jsでダンプするための構文である。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>Object Sample</TITLE>
<style type="text/css"> 
</style>

<script type="text/javascript" src="scripts/lib/prettyprint.js" >
</script> 

<script type="text/javascript">//<![CDATA[
/*
 * オブジェクト操作のサンプル
 */

// 空のオブジェクト
var test = {};

//プロパティーを足していく
test._arr = ["pretty","print"];
test._func = function(_str){
	alert(_str);
	return;
}

// PrettyPrintでダンプ
function init() {
	// 追加したfunctionのテスト	
	test._func("hello"); // --- (1)
	document.getElementById('debug').appendChild(prettyPrint(test)); // --- (2)
}

// ]]>
</script>
</HEAD>

<BODY onload="init()">
	<!-- prettyPrint.jsレンダリング用 -->
	<div id="debug" style="width:450px;"></div>
</BODY>
</HTML>

これを実行すると、たしかに、alertが上がってきて、動的に追加した関数が機能していることがわかる。


以下は、prettyPrint.jsでダンプした結果。普通のオブジェクトとなっている。
要するにJavascriptでいうオブジェクトは、実行中に定義することが可能ということだ。


ついでに、動的に追加したプロパティーは、delete(プロパティー名)で動的に削除できる。
たとえば、

// 空のオブジェクト
var test = {};

//プロパティーを足していく
test._arr = ["pretty","print"];
test._func = function(_str){
	alert(_str);
	return;
}

//プロパティーを消す。
delete(test._arr);

とすると、以下のようになる。なかなか面白い。

注記；「Javascriptにおけるオブジェクトとはハッシュテーブルである」という言い方をする場合がある（より理解を深めたい方は、ZDNet:白石俊平氏の記事「JavaScriptのオブジェクトとは：ちゃんと理解してますか」を参照してください）。