THE HAM MEDIA BLOG

jQuery1.4から追加されたjQuery.proxy()を試してみる

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
proxy

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()メソッドを使わない場合、普通はどうなるか。

サンプルデモ1

■サンプルデモ1 コード

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

■サンプルデモ1

サンプルデモ1 解説

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

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

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

サンプルデモ2

■サンプルデモ2 コード

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

■サンプルデモ2

サンプルデモ2 解説

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

サンプルデモ3

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

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

■サンプルデモ3 コード

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

■サンプルデモ3

サンプルデモ3 解説

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

利用どころ

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

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

この記事へのコメント
な、なんだってー!

今までイベントリスナーに対して
var func = (function() { ... })(this);
$(hoge).click(func);

とか
var self = this;
$(hoge).click(function(){ ... alert(self.hoge); });

みたいな姑息な方法でやってたんですけど、大体がproxyで解決してしまうんですね!

でも、もともとイベント発生元を指すthisとの共存をする方法は無いんでしょうか?
Posted by たかおファン at 2010年03月08日
あ、上の例は引数抜けてました。
var func = (function(self) { self.hoge; })(this);
$(hoge).click(func);
でした。
Posted by たかおファン at 2010年03月08日
>たかおファンさん
コメントありがとうございます!
たしかに var self = this; って使い方してました。
なるほど、それも.proxy()でもできますね。
今後は.proxy()でやってみるとします。
Posted by ハム at 2010年03月09日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/142734325
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック

jQuery.proxy() って便利ですね
Excerpt: なんだか頻繁に絡んで申し訳ないと思いつつも、THE HAM MEDIAさんのところで、「jQuery1.4から追加されたjQuery.proxy()を試してみる」というすごく分かりやすい記事があり、僕..
Weblog: かたつむりくんのWWW
Tracked: 2010-03-05 06:37

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。