AngularJS TIPS
thisキーワードの参照先を固定するには？（bindメソッド）
分脈により変換する「this」。その問題を解消するangular.bindメソッドの基本的な使い方を解説する。
thisは、文脈によって参照する先が変化する特別な変数です。例えば以下のような例を見てみましょう。
|
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body>
<button id="btn">押す</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script>
var person = {
name: '山田祥寛',
address: '北海道小金井市大津0-11-222',
toString: function() {
console.log(this.name + '/' + this.address);
}
};
// 1イベントリスナーとしてperson.toStringメソッドを登録
document.getElementById('btn').addEventListener(
'click', person.toString, true);
</script>
</body>
</html>
|
<button>要素btnをクリックしたタイミングで、オブジェクトpersonのtoStringメソッドを呼び出しなさい、という意味のコードです（1）。例えばこの例であれば、「山田祥寛/北海道小金井市大津0-11-222」のような結果を得られることを期待しています。
しかし、結果は「/undefined」。this.～で表されたコードが、オブジェクトperson内のプロパティを参照していないのです。
これは、まさにthisの参照先が文脈によって変化した例です。オブジェクトの配下ではthisは、現在のオブジェクトを示します。しかし、イベントリスナー配下のthisは、イベントの発生元（ここでは<button>要素）を指します。<button>要素は、title／addressのようなプロパティを持ちませんので、結果はundefinedとなります。
このようにthisが変化することによる不具合を解消するのが、angular.bindメソッドの役割です。bindメソッドを利用することで、thisが参照する先のオブジェクトを指定できます。
［構文］bindメソッド
bind(self, func [,args])
- self： 引数
funcの中でthisとなるオブジェクト - func： 対象となる関数
- args： 引数
funcに渡すパラメーター（可変長引数）
先ほどの1を、bindメソッドを使って書き換えたのが、以下のコードです。
|
document.getElementById('btn').addEventListener(
'click', angular.bind(person, person.toString), true);
|
これでイベントリスナーの配下でもthisがpersonを指すようになりましたので、「山田祥寛/北海道小金井市大津0-11-222」のような結果が得られます。
処理対象：関数コンポーネント カテゴリ：基本
処理対象：this カテゴリ：基本
API：angular.bind カテゴリ：ng（コアモジュール） > function（関数）
※以下では、本稿の前後を合わせて5回分（第46回～第50回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
46. パラメーターを持ったフィルターを定義するには？（filter／identity／noopメソッド）
独自のパラメーター付きフィルターを作成するための基本的な手順を説明。サンプルとしてmapフィルターを作成し、これを使って配列の数値の2乗を計算してみる。
47. 既存のフィルターを利用して新たなフィルターを定義するには？（$filterサービス）
既存フィルターの機能を活用する独自のフィルターを作成するための基本的な手順を解説。サンプルとしてbyte単位の数値をMbyte単位に変換するmegaByteフィルターを作成する。
48. 【現在、表示中】≫ thisキーワードの参照先を固定するには？（bindメソッド）
分脈により変換する「this」。その問題を解消するangular.bindメソッドの基本的な使い方を解説する。
49. AngularJSを手動で起動するには？（bootstrap）
通常は自動起動するAngularJSを手動で起動するにはangular.bootstrapメソッドを使用する。その基本的な使い方を解説。
50. ルーティング機能を実装するには？（$routeProviderプロバイダー）
AngularJSではngRouteモジュールを利用したルーティングが可能だ。その基本的な用法（ルーティングの定義／コントローラー／テンプレートなど）について解説する。
