初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ
このエントリーをはてなブックマークに追加
索引
1章：jQuery入門
2章：jQuery基礎
3章：jQuery発展
番外編：研究

proxyメソッド(1)

まずはthisについて

これまでは、thisはイベントハンドラ内に書かれた場合、イベントが発生した要素を指すと説明しました。ここでは、もう少し詳しくthisについて説明したいと思います。サンプル（05/01_01.html）を開いてください。

まずは以下のobjectオブジェクトを作成している部分を確認します。新しく作成したobjectオブジェクトには２行目でmyNameというプロパティを作成し値に「Bob」と設定しました。さらに3〜5行目でgetNameFuncメソッド（functionが代入され、機能を持ったプロパティ）が設定され、実行されるとアラートで自分のmyNameを表示するようにしました。 

var newObj = new Object();
newObj.myName = "Bob";
newObj.getNameFunc = function () {
	alert(this.myName);
}

そして以下の部分で、newObjのgetNameFuncメソッドを実行するようにしています。ですからdiv(id=test)をクリックするとmyNameであるBobがアラートで表示されます。 

$("#test").click(function(){
	newObj.getNameFunc();
})

このサンプルでのポイントはgetNameFuncのalertで利用したthisです。このthisは必要ないと感じるかもしれませんが、省略することはできません。サンプル（05/01_02.html）ではthisを省いているためブラウザをクリックしても何も表示されないことを確認して下さい。

thisの内容は状況にによって変わる

2章：thisについてで説明したように、jQueryではイベント内でのthisはイベントが発生した要素を指さします。しかし通常のjavaScriptではthisは自分のことを指します（例外もあります）。ですのでサンプル04/04_01.htmlではnewObj自身のmyNameである「Bob」が表示され、サンプル05/01_02.htmlのようにthisを省略してしまうと「誰の」myNameを表示するか分からないため機能しないのです。

これだけなら話は簡単なのですが、thisは場合によっては思わぬ対象を指します。サンプル（05/01_03.html）を開き、下記のdiv(id=test)をクリックする処理を確認して下さい。

clickイベントの引数にfunctionを書くのではなく、以下の様に直接newObj.getNameFuncを書くようにしました。これは構文としても間違いではなく2章：clickイベントの「あらかじめfunctionを用意してもOKです」の項目でも紹介しています。 

$("#test").click(newObj.getNameFunc);

ですがdivをクリックすると「undefined」と表示されてしまいます。原因を探るためにサンプル（05/01_04.html）を用意しましたので、下記のgetNameFunc内のalertを確認して下さい。

thisをの内容をアラートで表示するようにしただけです。クリックすると「object HTMLDivElement」と表示され、div要素であることが確認できます。 

newObj.getNameFunc = function () {
	alert(this);
}

ページ内にdivは１つしかないため、どのdivかは判明しています。ですが念のため確認できるサンプル（05/01_05.html）を用意しました。このサンプルでは以下の様にthis（このサンプルではdiv要素）をセレクタに利用してtextメソッドで「test」と表示させます。 

newObj.getNameFunc = function () {
	$(this).text("test!")
}

実際にdivをクリックするとidがtestのdivに「test」と表示されます。サンプル（05/01_01.html）の書き方（clickイベントにfunctionを作成してイベント実行時の処理を設定）ではthisはnewObjを指し、サンプル（05/01_03.html）の書き方（clickイベントにnewObj.getNameFuncを設定）ではdivを指しました。このように書き方によってthisが変化するのは何故なのでしょうか？

機能をコピーして設定している

実はjavaScriptにおいてthisは自分自身を指すことに変わりないのです。ポイントは以下の様にfunctionの設定の仕方によって扱いが変わることにあるのです。

イベントで無名関数を利用して処理を設定（サンプル05/01_01.html）
セレクタで指定した要素に無名関数で作成した機能を設定します。

つまり05/05_01.htmlではクリックイベントが発生した際に「newObjのgetNameFuncを実行」するのです。getNameFuncはあくまでのnewObjに設定されたfunctionなのです。ですからthisはnewObjを指します。

イベントで他のオブジェクトのfunctionを設定（サンプル05/01_03.html）
セレクタで指定した要素に、他のオブジェクトのfunctionをコピーして設定します。

つまり05/01_03.htmlではクリックイベントが発生した際に「自分にコピーされたgetNameFuncを実行」するのです。getNameFuncはセレクタで指定されたdivにコピーされた処理なのでthisはdivを指します。

ややこしい話になりましたが、次回説明するproxyメソッドを理解するためには、今回のことを理解している必要があるのです。