【Backbone.js】クロージャにおける this(Viewクラスを例に)

View メソッドとして、クロージャを使う際の this に関して

そもそも、クロージャを使う利点

  • メンバ変数をローカル変数に落とし込める
    • 1つのメソッド内でしか使用しない変数 && 状態を保持する必要がある

Example

onTapFoo: (function() {
    var currentState = 1;

    return function(event) {
        if (currentState !== event.state) {
            currentState = event.state;

            // DOM操作とか
            this.$barButton.text(currentState);
        }
    };
})()
  • この thiswindow を指すのでは?と一瞬思うかもしれないがそうではない。
  • なぜなら今回は初回実行時に関数が return されており this のコンテクストはあくまで 呼び出した時点でのコンテクスト に依存するため。つまり、同じViewクラス内から FooView.bar() としたりイベントハンドラとして呼び出される場合、普通にViewを指すのである。

正確には

関数の中で関数を定義すると 内側のthisコンテキストがグローバルオブジェクトを指す という仕様

参考

ism1000ch.hatenablog.com