Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
AngularJS TIPS

AngularJS TIPS

thisキーワードの参照先を固定するには?(bindメソッド)

2016年3月16日

分脈により変換する「this」。その問題を解消するangular.bindメソッドの基本的な使い方を解説する。

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

 thisは、文脈によって参照する先が変化する特別な変数です。例えば以下のような例を見てみましょう。

HTML
<!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>
clickイベントリスナーとして、メソッドを定義したコード(this.html)

 <button>要素btnをクリックしたタイミングで、オブジェクトpersontoStringメソッドを呼び出しなさい、という意味のコードです(1)。例えばこの例であれば、「山田祥寛/北海道小金井市大津0-11-222」のような結果を得られることを期待しています。

 しかし、結果は「/undefined」。this.~で表されたコードが、オブジェクトperson内のプロパティを参照していないのです。

 これは、まさにthisの参照先が文脈によって変化した例です。オブジェクトの配下ではthisは、現在のオブジェクトを示します。しかし、イベントリスナー配下のthisは、イベントの発生元(ここでは<button>要素)を指します。<button>要素は、titleaddressのようなプロパティを持ちませんので、結果はundefinedとなります。

 このようにthisが変化することによる不具合を解消するのが、angular.bindメソッドの役割です。bindメソッドを利用することで、thisが参照する先のオブジェクトを指定できます。

[構文]bindメソッド

bind(self, func [,args])

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

 先ほどの1を、bindメソッドを使って書き換えたのが、以下のコードです。

JavaScript
document.getElementById('btn').addEventListener(
  'click', angular.bind(person, person.toString), true);
bindメソッドを使って書き換えた例

 これでイベントリスナーの配下でもthispersonを指すようになりましたので、「山田祥寛/北海道小金井市大津0-11-222」のような結果が得られます。

処理対象:フィルタリング カテゴリ:基本
処理対象:関数コンポーネント カテゴリ:基本
処理対象:this カテゴリ:基本
API:angular.bind カテゴリ:ng(コアモジュール) > function(関数)

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

AngularJS TIPS
46. パラメーターを持ったフィルターを定義するには?(filter/identity/noopメソッド)

独自のパラメーター付きフィルターを作成するための基本的な手順を説明。サンプルとしてmapフィルターを作成し、これを使って配列の数値の2乗を計算してみる。

AngularJS TIPS
47. 既存のフィルターを利用して新たなフィルターを定義するには?($filterサービス)

既存フィルターの機能を活用する独自のフィルターを作成するための基本的な手順を解説。サンプルとしてbyte単位の数値をMbyte単位に変換するmegaByteフィルターを作成する。

AngularJS TIPS
48. 【現在、表示中】≫ thisキーワードの参照先を固定するには?(bindメソッド)

分脈により変換する「this」。その問題を解消するangular.bindメソッドの基本的な使い方を解説する。

AngularJS TIPS
49. AngularJSを手動で起動するには?(bootstrap)

通常は自動起動するAngularJSを手動で起動するにはangular.bootstrapメソッドを使用する。その基本的な使い方を解説。

AngularJS TIPS
50. ルーティング機能を実装するには?($routeProviderプロバイダー)

AngularJSではngRouteモジュールを利用したルーティングが可能だ。その基本的な用法(ルーティングの定義/コントローラー/テンプレートなど)について解説する。

サイトからのお知らせ

Twitterでつぶやこう!