オブジェクトの実行コンテキスト

モジュールタイプのオブジェクトで、実行コンテキストをthisにするかオブジェクト自身にするか、という話。

this

モジュールタイプのオブジェクトを書いていて、途中でやっぱクラスにしたい（そもそもそういう設計はまずいのだが）というケースを考えると、コンテキストはthisにしといたほうが移行の手間がなく汎用性が高い。

this

var moduleObj = {
    init: function(name){
        this.name = name;
    },
    say: function(){
        console.log(this.name);
    }   
}

オブジェクト自身

thisの場合、イベント登録やクロージャを使う場合はfunction内でthisがwindowオブジェクトになるので、thisをローカル変数に入れたりと手間が増える。(jQueryのproxyやES5のbindを使えば解決するが)
それを考えるとオブジェクト自身のほうが、thisにとらわれることなくコーディングができる。

thisの場合

var moduleObj = {
    init: function(elm, name){
        var self = this;
        this.elm = elm;
        this.name = name;

        //イベント付与
        this.elm.addEventListener('click', function(e){
            self.clickHandler(e);
        });
    },
    clickHandler: function(e){
        console.log(this.name);
    }
}

オブジェクト自身の場合

var moduleObj = {
    init: function(elm, name){
        moduleObj.elm = elm;
        moduleObj.name = name;

        //イベント付与
        moduleObj.elm.addEventListener('click', moduleObj.clickHandler);
    },
    clickHandler: function(e){
        console.log(moduleObj.name);
    }
}

thatをつかう

個人的な感想として、
オブジェクト自身にすると、エディタでオブジェクト自身に色がつかないのと、オブジェクトの名前が長くなりがちになり、その結果コードが読みにくくなってしまうのがあまり好きではない。
これを解決する方法としてモジュールを表すオブジェクトと共にthatも定義する。
名前はthatで無くてもselfでもmeでも良い。
エディタで色を変えるように設定するとより読みやすくなる。

that

var that,
var moduleObj = that = {
    init: function(elm, name){
        that.elm = elm;
        that.name = name;

        //イベント付与
        that.elm.addEventListener('click', that.clickHandler);
    },
    clickHandler: function(e){
        console.log(that.name);
    }
}

雑感

個人としてはモジュールタイプのオブジェクトであれば「オブジェクト自身」を使っている。
「that」の方法はthisを意識しなくても良く、コードも見やすくなるとは思う。
ただし1つのファイルに複数のモジュールを書くことができないのと、thatはthisの参照として使われるので人によっては逆にわかりにくく、複数人で開発するには向いていない。
一人で作るならなんでも良いけど、複数人の場合は開発後のメンテナンスを考慮してこの辺も決めて開発したほうが良いと思う。