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