THE HAM MEDIA BLOG

Quick Tip: Learning jQuery 1.4's $.proxy | Nettuts+

jQuery 1.4で追加されたjQuery.proxy()、この使い方について解説がされていましたので、ご紹介。自分なりに変化させたりしていざチャレンジ！！

jQuery.proxy()ってなに？

This method is most useful for attaching event handlers to an element where the context is pointing back to a different object. Additionally, jQuery makes sure that even if you bind the function returned from jQuery.proxy() it will still unbind the correct function, if passed the original.
jQuery.proxy() - jQuery API

つまり、別オブジェクト内で使われている「this」が、そのオブジェクト内で使われているかのような値が返ってくるんだじぇ！

かみ砕いてみたけど・・・えっと・・・どういうこと？

つまりだ、サンプルを見てみろよということで、まずはこのjQuery.proxy()メソッドを使わない場合、普通はどうなるか。

サンプルデモ１

■サンプルデモ１ コード

var obj01 = {
    somevar : '何かの値',
    doSomething : function() {
        alert(this.somevar);
    }
};
$('button#test01').click(obj01.doSomething); 

■サンプルデモ１

サンプルデモ１ 解説

上のサンプルデモ１のボタンをクリックしてみましたか？obj01内のdoSomethingでは、「this.somevar」の値をアラートする関数が入っていました。ところがデモ１の結果は「undefind」。なじぇ？

何故かと言うと、「this.somevar」の「this」が、obj01オブジェクトを示しているのかと思いきや、同じオブジェクト内から呼び出されたわけではないので、この場合のthisには押したボタン自体の「button#test01」となっている。

通常は上記のような結果になるのですが、jQuery.proxy()メソッドを使うと、thisがobj01オブジェクトを示すようになります。

サンプルデモ２

■サンプルデモ２ コード

var obj01 = {
    somevar : '何かの値',
    doSomething : function() {
        alert(this.somevar);
    }
};
$('button#test02').click($.proxy(obj01.doSomething, obj01)); 

■サンプルデモ２

サンプルデモ２ 解説

上のサンプルデモ２のボタンをクリックすると、先ほどとは違い「何かの値」というアラートができます。jQuery.proxy()メソッドによって、thisの指し示す先が、obj01内のsomevarになったためです。オブジェクト内になくてもこのjQuery.proxy()メソッドを使えば、その呼び出しに応じて変化できるという優れものなのです。

サンプルデモ３

紹介先の動画で紹介されていたのですが、このjQuery.proxy()メソッドのcontext部分がいわゆるthisに該当する部分になるっぽいです。

試しに下記のようなコート。

■サンプルデモ３ コード

var obj01 = {
    somevar : '何かの値',
    doSomething : function() {
        alert(this.somevar);
    }
};
var obj02 = {
    somevar : 'Twitter使ってます。フォロープリーズ。'
};
$('button#test03').click($.proxy(obj01.doSomething, obj02)); 

■サンプルデモ３

サンプルデモ３ 解説

jQuery.proxy()メソッドのfunction部分で利用しているのが、obj01内のdoSomethingで、アラートで表示されるのが、obj02のsomevar。function内のthisがjQuery.proxy()メソッドのcontextによってターゲットが変化したため、アラートの値が変わってます。

利用どころ

正直、まだどのような箇所でうまく使えるのかイメージできていないのですが、同一オブジェクト内になくてもthisの示し先を操作できるので、便利になるようです。

ぜひ活用どころを見つけてご利用下さい。もしくは使いどころをご教授下さい！