jQuery逆引きリファレンス

jQuery逆引きリファレンス

thisキーワードの参照先を固定するには?($.proxy)

2016年11月21日

文脈により変化するthisキーワードの参照先を、$.proxyメソッドにより固定する方法を説明する。

  • このエントリーをはてなブックマークに追加

 JavaScriptにおけるthisは、中級者以上になっても間違いを引き起こしやすい、中々に厄介なキーワードです。というのも、thisは「文脈によって参照先が変化する」という性質を持つためです。まずは、具体的な例を見てみましょう。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<form>
  <input type="button" id="btn" value="実行" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  var obj = {
    name: '山田理沙',
    address: '青森県小金井市大津9-78-423',
    toString: function() {
      console.log(this.name + '::' + this.address);
    }
  };

  // clickイベントリスナーとして、obj.toStringメソッドを登録
  $('#btn').click(obj.toString);
});
</script>
</body>
</html>
リスト1 ボタンをクリックしたときにobj.name/addressプロパティの内容を出力するコード(proxy.html)

 ボタンをクリックしたときに、オブジェクトobjtoStringメソッドを呼び出しなさい、という意味のコードです。この例であれば、obj.nameobj.addressの値を基に「山田理沙::青森県小金井市大津9-78-423」のような文字列をログ出力することを期待しています。

 しかし、得られる結果は「::undefined」。this.namethis.addressが意図したように、objのプロパティを参照できていないのです。

 これが「文脈によって参照先が変化する」と言った意味です。オブジェクトobjの配下では、thisはオブジェクト自身を表します。しかし、イベントリスナーの配下では、thisはイベントの発生元、ここでは<input>要素を表すのです。要素オブジェクトはaddressプロパティを持ちませんし、nameプロパティは(存在しますが)空なので、結果として空文字列+「::」+undefinedを返すわけです。

 このような場合に、thisの参照先を変更する(=固定する)のが$.proxyメソッドの役割です。

[構文]$.proxyメソッド

$.proxy(func, context [,args])

  • func: 対象となる関数
  • context: 引数funcの中でthisとなるオブジェクト
  • args: 引数funcに渡すパラメーター(可変長引数)

 リスト1の例であれば、太字の部分を以下のように書き換えてみましょう。

JavaScript
$('#btn').click($.proxy(obj.toString, obj));
リスト2 リスト1の太字部分をこれに書き換える

 これでイベントリスナーの中でもobj.toStringメソッド配下のthisobjを指すようになりました。確かに「山田理沙::青森県小金井市大津9-78-423」のような結果を得られることを確認してください。

処理対象:thisキーワード カテゴリ:ユーティリティ
API:jQuery.proxy() カテゴリ:Events(イベント) > Event Handler Attachment | Utilities(ユーティリティ)

※以下では、本稿の前後を合わせて5回分(第56回~第60回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

56. 既存の要素を削除するには? ― remove/emptyメソッド

指定した要素そのもの/要素の中身(=子要素)を削除する方法を説明する。

57. 既存の要素をコピーするには? ― cloneメソッド

既存の要素をjQueryオブジェクトとして複製する方法を説明。オブジェクトはappendToなどの挿入系メソッドを使ってHTMLソース内に要素として追加したりできる。

58. 【現在、表示中】≫ thisキーワードの参照先を固定するには?($.proxy)

文脈により変化するthisキーワードの参照先を、$.proxyメソッドにより固定する方法を説明する。

59. 一般的なAjax通信を実装するには?($.ajax)

非同期通信の動作をより細かく制御したい場面で使える$.ajaxメソッドの構文と利用可能なパラメーター群の概要を紹介。簡単なサンプルで使い方を説明する。

60. 非同期通信のキャッシュを無効化するには?($.ajax[cache])

Ajax通信の結果をキャッシュするか否かを制御できる「$.ajaxメソッドのcacheパラメーター」の基本的な使い方を説明する。

イベント情報(メディアスポンサーです)

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • 日本マイクロソフト株式会社
  • グレープシティ株式会社