javascript - OOP Javascript 親オブジェクト メソッドまたはオブジェクト?

Question

var O = {

    elements: {

        main: function() { return jQuery("#main"); },
        footer: function() { return jQuery("#footer"); }
    },

    main: function(html) {

        return (this.elements.main());
    },


    style: {

        setMaincolor: function() {

            // TypeError: Cannot call method 'main' of undefined
            return (this.elements.main());

        }

    }    

};

それで; 私は O.style オブジェクトの親オブジェクトです ????

O.style.setMaincolor() // TypeError: Cannot call method 'main' of undefined
O.main() // [<div id=​"main">​&lt;/div>​]

setMaincolor メソッドはこれを O Object に返します

Answer 1

thisメソッドが呼び出されたオブジェクトを参照します。

main()はOオブジェクトで呼び出されるためthis、 への参照Oです。したがってthis.elements === O.elements。

setMaincolor()はstyleオブジェクトで呼び出されるため、プロパティを持たないthisへの参照になります。O.style.elements

Answer 2

何thisを意味するかを明示的に定義する必要があります。指定されていない場合はthis、最も近いオブジェクトを指します。

次のようにクロージャーを作成できます。

var O = (function() {
    var self = {
        elements: {
            main: function() { return jQuery("#main"); },
            footer: function() { return jQuery("#footer"); }
        }
    }

    self.style = {
        setMaincolor: function() {
            return self.elements.main();
        }
    }

    return self;
}());

は(function() { ... }());オブジェクトを返し、 はオブジェクトだけが知ってselfいる「プライベート」変数であり、それ自体を指しているため、参照が機能します。O.elements.main()

Answer 3

this.elementsメソッドで参照することはできませんsetMaincolor。-pointerthisはスタイル オブジェクトを参照します。代わりに関数で使用O.elements.main()してください。O.style.setMaincolor

style: {
    setMaincolor: function() {
        return (O.elements.main());

    }
}   

ただし、このアプローチはお勧めしませんが、参照O.style.setMaincolor.call(O,[]);する: も使用できることに注意してください。thisO

これは私がそれを解決した方法です：

var O = (function() {
   var self = {
       elements: {
           main: function() { return jQuery("#main"); },
           footer: function() { return jQuery("#footer"); }
       },

       main: function(html) {
           return self.elements.main();
       },

       style: {
           setMaincolor: function() {
               return self.elements.main();
           }
       }
   };    

   return self;    
}());