Javascriptのオブジェクトの基本：インスタンス化とthis

Javascript prettyPrint

先のログで、「コンストラクタのthisは、生成したインスタンスをさす」と書いた。これはJavaも同じだが、Javascriptでは「thisが何をさすのか」と迷う場面がしばしばある。

このログでは、一番単純な例で、「thisのさす物」を覗いてみる。

ソースは以下。
関数testを用意し、それがthisを返却するように定義する(1)。
(2)でtestをインスタンス化してコンストラクタを動かす。この結果として、objにthisへの参照が入る。
これを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 = function(){
	// コンストラクタ
	this._arr = ["pretty","print"];	// --- (3) thisというインスタンスに_arrを追加する。
	return this;　// --- (1)  thisを返す。
};

// PrettyPrintでダンプ
function init() {
	var _obj = new test(); // --- (2) 上の(1)によりthisをうけとる。
	document.getElementById('debug1').appendChild(prettyPrint(_obj));
}

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

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


以下が、prettyPrint.jsによるダンプ結果である。thisはtestのインスタンスそのものを表していることがわかる。


ここで、(3)の解釈には若干の注意を払うべきだと思う。
thisは、new演算子が発生したタイミングで生成されたインスタンスをさす。これは、(3)の実行前に行われるのであるから、(3)は、

生成されたtestのインスタンスに、_arrを動的に追加する

のと同等であるということになる。そして、この結果として、_objをダンプした際のプロパティーとして、_arrが存在することになる。

コンクリートに定義されているように見えるオブジェクトも、実行局面では、動的な変更と同等（＝２つの間に本質的な違いはない）

といえる。