bata's log

フロントエンド系のTipsとかメモ

オブジェクトリテラルを入れ子にした場合のthisの扱いについて

下記のような書き方は機能を切り分けたりする時によくやると思いますが、オブジェクトリテラルが入れ子になった場合、入れ子のなかでthisの扱いが変わってしまいます。

var MyApp = {

    init: function(){
        this.getFugafuga(); //fugafuga!
    },

    util: {

        init: function(){
            this.getHogehoge(); //hogehoge!
            this.getFugafuga(); //undifine is not function

            MyApp.getFugafuga(); // fugafuga!
        },

        getHogehoge: function(){
            console.log('hogehoge!');
        }
    },

    getFugafuga: function(){
        console.log('fugafuga!');
    }

}

MyApp.util内でメソッドを呼び出す場合、thisMyApp.utilを指すことになります。
よってthis.getFugafuga();は実際にはMyApp.util.getFugafuga();となってしまっているのでエラーになります。

まあ、ちゃんと設計すればこういう呼び出し方にはならないのですが、、、