jQuery.proxy() って便利ですね

なんだか頻繁に絡んで申し訳ないと思いつつも、THE HAM MEDIAさんのところで、「jQuery1.4から追加されたjQuery.proxy()を試してみる」というすごく分かりやすい記事があり、僕も勉強させていただいたので、エントリーしてみます。 jQuery1.4から追加されたjQuery.proxy()を試してみる | THE HAM MEDIA ちなみに、ここではハムさんの記事を読んで...

なんだか頻繁に絡んで申し訳ないと思いつつも、THE HAM MEDIAさんのところで、「jQuery1.4から追加されたjQuery.proxy()を試してみる」というすごく分かりやすい記事があり、僕も勉強させていただいたので、エントリーしてみます。

ちなみに、ここではハムさんの記事を読んでいただいたのを前提として書いていきます。

ハムさんの記事では以下のようなコードがサンプルとして紹介されていました。

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

button#test01

button#test02

button#test03

このように $.proxy を使うと、うまく行くわけですが、それを別の書き方をしてみるとどうなるかを考えてみて、結果、あー $.proxy を使った方が便利だなーというのを実感したわけです。そもそも $.proxy がそういう使い方をするものなのかは置いておいて。

それで書いてみたのが以下です。

var obj03 = {
 somevar : '何かの値',
 doSomething : function(obj) {
 alert(obj.somevar);
 }
};
var obj04 = {
 somevar : 'Twitter使ってます。フォロープリーズ。'
};
$('button#test04').click(function(e){
 obj03.doSomething(e.target);
}); 
$('button#test05').click(function(e){
 obj03.doSomething(obj01);
});
$('button#test06').click(function(e){
 obj03.doSomething(obj02);
});

button#test04(#test01と同じ挙動)

button#test05(#test02と同じ挙動)

button#test06(#test03と同じ挙動)

んー、やっぱり $.proxy を使った方が便利だな。(ちなみにFirefoxでした動作確認してません)

20100305-proxy.js
Published 2010-03-05
Updated 2019-06-25

「JavaScript」カテゴリの記事一覧