Mach3.laBlog

いつの間に実装されていたjQuery.proxy等という便利な機能

この記事は賞味期限切れです。(更新から1年が経過しています)

Mach3: Prototype.jsのbind的なノリのものを書く
を一ヶ月ぐらい前に書いたばかりですが、いつのまにかjQueryでも同様の機能が実装されておりました。
1.4出てからもう3ヶ月ぐらい経つと言うのに…

$.proxy

jQuery.proxy

jQuery.proxy() – jQuery API

jQuery.proxy( function, context )

function
文脈を変えたいfunction
context
functionでthisとして扱いたいオブジェクト

つまりはイベントハンドラ等にfunctionを渡すとき、
そのfunction内で使うthisをあるオブジェクトに固定しておきたいときに使います。

DEMO

DEMO (on JSbin)

<input type="button" value="Normal" id="normalButton" name="normalButton" />
<input type="button" value="With Proxy" id="proxyButton" name="proxyButton" />

<script type="text/javascript">
var TestObj = {
    name:"John",
    func:function(){
        alert(this.name);
    }
};
$("#normalButton").bind("click", TestObj.func); // "normalButton"
$("#proxyButton").bind("click", $.proxy( TestObj.func, TestObj ) ); // "John"​
</script>

Prototype.jsの場合は、functionを拡張した形で実装されていた覚えが。

DEMO (on JSbin)

<input type="button" id="normalButton" name="normalButton" value="Normal" />
<input type="button" id="bindButton" name="bindButton" value="With Bind" />

<script type="text/javascript">
var MyObj = {
    name:"John",
    func:function(){
        alert(this.name);
    }
};
$("normalButton").observe( "click", MyObj.func ); // "normalButton"
$("bindButton").observe( "click", MyObj.func.bind(MyObj) ); // "John"
</script>

こんな感じですね。この形も使いやすくて好きなのですが、
乗り換えた時期は猫も杓子もjQueryなご時世だったもので。

検索から「bind的なノリの~」に飛んできた人に申し訳なく、
フォローのつもりでここにログっておきます。

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*