デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
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とまったく同じように動作します。