jQuery逆引きリファレンス
thisキーワードの参照先を固定するには？（$.proxy）
文脈により変化するthisキーワードの参照先を、$.proxyメソッドにより固定する方法を説明する。
JavaScriptにおけるthisは、中級者以上になっても間違いを引き起こしやすい、中々に厄介なキーワードです。というのも、thisは「文脈によって参照先が変化する」という性質を持つためです。まずは、具体的な例を見てみましょう。
|
<!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>
|
ボタンをクリックしたときに、オブジェクトobjのtoStringメソッドを呼び出しなさい、という意味のコードです。この例であれば、obj.name／obj.addressの値を基に「山田理沙::青森県小金井市大津9-78-423」のような文字列をログ出力することを期待しています。
しかし、得られる結果は「::undefined」。this.nameやthis.addressが意図したように、objのプロパティを参照できていないのです。
これが「文脈によって参照先が変化する」と言った意味です。オブジェクトobjの配下では、thisはオブジェクト自身を表します。しかし、イベントリスナーの配下では、thisはイベントの発生元、ここでは<input>要素を表すのです。要素オブジェクトはaddressプロパティを持ちませんし、nameプロパティは（存在しますが）空なので、結果として空文字列＋「::」＋undefinedを返すわけです。
このような場合に、thisの参照先を変更する（＝固定する）のが$.proxyメソッドの役割です。
［構文］$.proxyメソッド
$.proxy(func, context [,args])
- func： 対象となる関数
- context： 引数
funcの中でthisとなるオブジェクト - args： 引数
funcに渡すパラメーター（可変長引数）
リスト1の例であれば、太字の部分を以下のように書き換えてみましょう。
|
$('#btn').click($.proxy(obj.toString, obj));
|
これでイベントリスナーの中でもobj.toStringメソッド配下のthisがobjを指すようになりました。確かに「山田理沙::青森県小金井市大津9-78-423」のような結果を得られることを確認してください。
API：jQuery.proxy() カテゴリ：Events（イベント） > Event Handler Attachment ｜ Utilities（ユーティリティ）
※以下では、本稿の前後を合わせて5回分（第56回～第60回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
57. 既存の要素をコピーするには？ ― cloneメソッド
既存の要素をjQueryオブジェクトとして複製する方法を説明。オブジェクトはappendToなどの挿入系メソッドを使ってHTMLソース内に要素として追加したりできる。
58. 【現在、表示中】≫ thisキーワードの参照先を固定するには？（$.proxy）
文脈により変化するthisキーワードの参照先を、$.proxyメソッドにより固定する方法を説明する。
59. 一般的なAjax通信を実装するには？（$.ajax）
非同期通信の動作をより細かく制御したい場面で使える$.ajaxメソッドの構文と利用可能なパラメーター群の概要を紹介。簡単なサンプルで使い方を説明する。
60. 非同期通信のキャッシュを無効化するには？（$.ajax［cache］）
Ajax通信の結果をキャッシュするか否かを制御できる「$.ajaxメソッドのcacheパラメーター」の基本的な使い方を説明する。
