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 对象

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

由于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

你不能this.elements在你的setMaincolor方法中引用。this-pointer 指的是您的样式对象：改为O.elements.main()在您的O.style.setMaincolor函数中使用。

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

    }
}   

虽然，我不推荐这种方法，但请注意，您也可以使用：O.style.setMaincolor.call(O,[]);which make thisreference 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;    
}());