執筆者: 有限会社 WINGS プロジェクト 山田 祥寛

動作確認環境: Visual Studio 2010、jQuery 1.5 


this キーワードは、JavaScript の中でも最も扱いの難しい存在です。たとえば、以下のような例を見てみましょう。

HTML
<input type="button" id="btn" value="表示" /> 
 
<script src="../Scripts/jquery-1.5.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
  // dat、evt プロパティ、show メソッドを持つオブジェクト obj を定義 
var obj = { 
  dat : '6 月 25 日', 
  evt : 'リオの誕生', 
  show : function() { 
    window.alert(this.dat + 'は' + this.evt + 'です。'); 
  } 
}; 
  // ボタン #btn のクリック イベントに obj.show メソッドを登録 
$('#btn').click(obj.show); 
</script> 
 
 

          

図 1 

click イベントに対して obj.show メソッドを登録した結果、ボタンをクリックすると、「6 月 25 日はリオの誕生日です。」というメッセージがダイアログ表示されることを期待したコードですが、結果はそうはなりません。これは、this キーワードがイベント リスナーの中では、イベントの発生元 (ここではボタン) を指しているためです。そのため、this.dat も this.evt も目的の値を取得できません。

このような不具合を解消するには、$.proxy メソッドを利用します。以下は、$.proxy メソッドを使って、上のコードを書き換えた結果です (書き換え部分は太字で表しています)。

<input type="button" id="btn" value="表示" />
 
<script src="../Scripts/jquery-1.5.min.js" type="text/javascript"></script>
<script type="text/javascript">
var obj = {
  dat : '6月25日',
  evt : 'リオの誕生',
  show : function() {
    window.alert(this.dat + 'は' + this.evt + 'です。');
  }
};
$('#btn').click($.proxy(obj.show, obj));
</script>

           

図 2

$.proxy メソッドは、指定された関数 (ここでは obj.show) における this キーワードの参照先を一時的に固定する役割を持ちます。参照先は $.proxy メソッドの第 2 引数で指定します。つまりここでは、obj.show メソッド配下の this キーワードが obj を指すように指定しているわけです。

サンプルを動作させてみると、今度はオブジェクト obj 配下の dat、evt プロパティを正しく参照できていることが確認できます。


Code Recipe Code Recipe

ページのトップへ