Javascriptのオブジェクトの基本：イベントハンドラとthis

先のログ『Javascriptのオブジェクトの基本：インスタンス化とthis』では、this句について、

インスタンス化されたオブジェクトをさす

と書いた。

とはいえ、Javascriptで頻繁に登場するthis句が「いったい何を指しているの？」ということで悩むことも多い。
特に、イベントハンドラー内でthisが使われているときなど、注意が必要となる。

たとえば、以下のようなサンプルを考えてみる。

var onClickHdlr = function(){ // --- (1)
	document.getElementById('debug1').appendChild(prettyPrint(this));
	// この関数はグローバルスコープ。
};

というイベントハンドラーを用意し、ボタンのonClickイベントで呼び出して、thisをprettyPrint.jsでダンプしてみる。このときの出力（の一部）は以下のようになり、thisはwindowオブジェクトを指す。

次に、以下のサンプルスクリプトで同じことをしてみる。

var handlers = { // --- (2)
	prop1		: "hello",
	onClickHdlr	: function(){ // --- (3)
		document.getElementById('debug1').appendChild(prettyPrint(this));
		// これを含む最小のオブジェクトはhandlers。
	}
};

この場合のダンプ結果は以下となり、thisは、handlersオブジェクトを指す。

これらを見て明らかなように、this句は

イベントハンドラー（関数）を内包する最小のオブジェクトをさす

ということができる。