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">​</div>​]

setMaincolor方法將此返回給O Object

Answer 1

this是指在其上調用方法的對象。

main()是在O對象上調用的，因此this是對O的引用。 因此this.elements === O.elements 。

在style對象上調用setMaincolor() ，因此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

由於setMaincolor方法是在style對象內定義的， this是指style對象。 由於style對象沒有elements屬性，因此this.elements是未定義的。

一種解決方案是這樣的，您可以顯式命名O對象而不是使用this ：

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 (O.elements.main());

        }

    }    

};

Answer 4

您不能在setMaincolor方法中引用this.elements 。 this指針指向您的樣式對象：在O.style.setMaincolor函數中使用O.elements.main()代替。

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

    }
}   

盡管我不推薦這種方法，但是請注意，您也可以使用： O.style.setMaincolor.call(O,[]); 這使this參考O

這就是我要解決的方式：

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;    
}());