初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ
このエントリーをはてなブックマークに追加
索引
Core：コアとなる仕組み
Selectors：セレクタ
Attributes：属性
Traversing：対象の変更
Manipulation：操作
CSS：スタイルシート
Events：イベント
Effects：演出効果
Ajax：xml等との連携
Utilities：ユーティリティ
Data：データ
Miscellaneous：諸々
Deferred：処理管理
Callbacks：コールバック
Internals：内部処理

jQuery.proxy( )thisの内容を変更

構文

thisの内容を変更返値：function
jQuery.proxy( function, thisとするもの )ver1.4〜
jQuery.proxy( thisとするもの, function名 )ver1.4〜
この構文の場合、thisとするものに存在するfunctionしか設定できません。またfunction名は文字列で設定します。

機能

イベントハンドラ内のthisはイベントが発生した要素を指します。しかしjQuery.proxyメソッドを利用するとfunction内で利用するthisを自由に設定することができます。

解説

まずはjQuery.proxyメソッドを利用しないサンプル

サンプル（proxy/01.html）を開いてbody内にbutton要素しかないことを確認して下さい。このbutton要素にはname属性で「button」と設定されていることを覚えておいて下さい。 

<button name="button">click</button>

jQueryでは、まず以下の部分を確認してください。新規にobjectオブジェクト「johnObj」を作成し、nameプロパティに「john」と設定しています。さらにfunction「myFunc」を設定しました。このfunctionの処理内容はthisに設定されたnameプロパティをアラートで表示するだけです。この処理によってthisが何を指すかを確認します。 

var johnObj = new Object();
johnObj.name = "john";
johnObj.myFunc = function (){
	alert(this.name);
};

続いて以下の部分を確認してください。buttonをクリックしたらjohnObjに設定したmyFuncを実行します。結果としては「john」とアラートで表示されます。 

$("button").click(function (){
	johnObj.myFunc();
});

このサンプルで確認できるように、通常thisはfunctionが設定されているオブジェクトを指します。しかし初心者にとって混乱するケースがあるので次項で紹介します。

イベントに直接functionを設定すると...

サンプルproxy/01.htmlのbuttonをクリックする処理は、すこし回りくどい感じがします。サンプル（proxy/02.html）を開いてbuttonをクリックする処理を確認して下さい。以下の様にclickの引数に直接johnObj.myFuncを設定しました。 

$("button").click(johnObj.myFunc);

しかしbuttonをクリックすると、proxy/01.htmlとは異なり「button」とアラートで表示されます。

初心者にとってややこしいと感じるかもしれませんが、上記のような記述だと「button要素のclickのイベントハンドラとしてjohnObjにあるmyFuncをコピーして貼り付ける」。という意味になります。そのためjohnObjのmyFuncが実行されるのではなく、button要素にコピーされたmyFuncを実行していることになるのです。ですからアラートでbutton要素のname属性の値「button」が表示されるのです。しかしjQuery.proxyメソッドを利用すると、この様なケースでもthisの内容を自由に設定することができます。

thisの内容を変更する

サンプル（proxy/03.html）を開いて、proxy/02.htmlとほとんど同じ事を確認して下さい。異なるのは以下の様にclickの引数にjQuery.proxyメソッドを利用している点だけです。 

$(function () {
	$("button").click($.proxy(johnObj.myFunc, johnObj));
});

jQuery.proxyメソッドの第1引数には実行したいfunctionをオブジェクト付きで設定します。サンプルではjohnObjのmyFuncを実行したいので「johnObj.myFunc」と設定してあります。そして第2引数でfunction内のthisの内容を設定します。サンプルではjohnObjを設定しました。

結果として、buttonをクリックするとmyFunc内のthisはjohnObjとなるため、johnObjのname属性の値である「john」がアラートで表示されます。

もう1つの構文

thisとしたいオブジェクトに設定されたfunctionを実行する場合は、「構文」の2段目にある構文が利用できます。サンプル（proxy/04.html）を開いて、jQuery.proxyメソッドが以下の様に変更されているのを確認して下さい。第1引数にthisとして設定したいオブジェクト、第2引数に第1引数に設定されている実行したいfunction名を文字列で設定しています。 

$(function () {
	$("button").click($.proxy(johnObj, "myFunc"));
});

この構文でもproxy/03.htmlと同じようにthisをjohnObjに設定できるので、buttonをクリックすると「john」とアラートで表示されます。thisとしたいオブジェクトに設定されたfunctionを実行する場合は、こちらの方を利用した方が分かりやすいでしょう。

メモ

いまいちメリットが分からない

jQuery.proxyメソッドを利用するとthisを自由に変更できるため、functionで利用する対象を変更することが可能となります。サンプル（proxy/test01.html）を開いて以下の様に3種類のobjectオブジェクトが設定され、それぞれnameプロパティとpriceプロパティが設定されているのを確認して下さい。 

var appleObj = new Object();
appleObj.name = "apple";
appleObj.price = 100;
			
var orangeObj = new Object();
orangeObj.name = "orange";
orangeObj.price = 80;
			
var bananaObj = new Object();
bananaObj.name = "banana";
bananaObj.price = 40;

続いて以下の処理を確認して下さい。このfunctionでthisの内容を変更できれば、これ1つで複数のobjectオブジェクトの操作ができます。 

function fruitFunc(){
	var myStr = this.name + "の値段は" + this.price; 
	$("div").text(myStr)
}

実際、thisはjQuery.proxyメソッドで変更できますから、以下の様にボタンごとにjQuery.proxyメソッドの引数を変更すれば良いだけです。これでbuttonをクリックすると、ボタンに対応した果物のデータが表示されます。 

$("#apple").click($.proxy(fruitFunc, appleObj));
$("#orange").click($.proxy(fruitFunc, orangeObj));
$("#banana").click($.proxy(fruitFunc, bananaObj));

便利そうに見えるかもしれませんが、大抵のケースではjQuery.proxyメソッドを利用しなくても同じようなことができる気がします。今回のケースでもclickイベントは以下の様に第1引数にはオブジェクトが設定できますからサンプル（proxy/test01b.html）のようにシンプルに記述できます。 

$("#apple").click(appleObj, fruitFunc);
$("#orange").click(orangeObj, fruitFunc);
$("#banana").click(bananaObj, fruitFunc);

第1引数で渡されたオブジェクトはイベントオブジェクトのdataプロパティ経由で渡されますから、fruitFuncは以下の様に変更しています。 

function fruitFunc(eo){
	var myStr = eo.data.name + "の値段は" + eo.data.price; 
	$("div").text(myStr)
};

結果として、proxy/test01b.htmlもproxy/test01.htmlとまったく同じように動作します。