いつの間に実装されていたjQuery.proxy等という便利な機能
この記事は賞味期限切れです。(更新から1年が経過しています)
Mach3: Prototype.jsのbind的なノリのものを書く
を一ヶ月ぐらい前に書いたばかりですが、いつのまにかjQueryでも同様の機能が実装されておりました。
1.4出てからもう3ヶ月ぐらい経つと言うのに…
jQuery.proxy
jQuery.proxy( function, context )
- function
- 文脈を変えたいfunction
- context
- functionでthisとして扱いたいオブジェクト
つまりはイベントハンドラ等にfunctionを渡すとき、
そのfunction内で使うthisをあるオブジェクトに固定しておきたいときに使います。
DEMO
<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を拡張した形で実装されていた覚えが。
<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的なノリの~」に飛んできた人に申し訳なく、
フォローのつもりでここにログっておきます。
コメント