Question

我试图以面向对象的方式重写JS Web应用程序。

假设我有一个名为Application的主要对象：

var Application = (function(obj) {

    obj.init = function() {
        console.log("Application init");
    };
    obj.move = function() {
        return {
            left: function() { console.log("Move left"); },
            right: function() { console.log("Move right"); }
        }
    }

    return obj;

})(Application || {});

我想添加另一个可能有多个实例的方法，所以我需要添加一个原型:(这发生在另一个文件中）

var Application = (function(obj) {

    obj.child = function() {
        return {
            typeA: function() {
                console.log("New child object of type A");
                this.childID = Math.floor((Math.random() * 10) + 1); // Just a random number
            },
            typeB: function() {
                console.log("New child object of type B");
                this.childID = Math.floor((Math.random() * 10) + 1); // Just a random number
            }
        }
        // This is where it goes wrong
        obj.child.typeA.prototype = function() {
            getID: function() { console.log(this.childID) }
        }
    };

    return obj;

})(Application || {});

我的问题是我无法访问getID的原型函数typeA()。这可能是因为我构建应用程序的方式。我希望能够像这样调用原型方法：

var a = Application.child.typeA();
a.getID();

如何以正确的方式为这样的对象添加原型？

我是面向对象的Javascript的新手，因为有很多方法可以在JS中构建面向对象的应用程序，我很确定我搞砸了它们。

Answer 1

我在这里做错了什么？

child是一个返回一个对象的函数，你似乎想把它作为对象本身。此外，它在原型分配完成之前完成了return。原型“对象”本身是对象文字和函数之间的语法混合。

相反，请使用

var Application = (function(obj) {

    obj.child = {
        typeA: function() {
            console.log("New child object of type A");
            this.childID = Math.floor((Math.random() * 10) + 1); // Just a random number
        },
        typeB: function() {
            console.log("New child object of type B");
            this.childID = Math.floor((Math.random() * 10) + 1); // Just a random number
        }
    };
    obj.child.typeA.prototype.getID = function() {
         console.log(this.childID)
    };

    return obj;
})(Application || {});

您也可以直接将对象字面值分配给.prototype，但that is not recommended可以直接修改现有对象。

我构建应用程序的方式是一种好的做法吗？

是的，这是一种常见的模式。

Javascript面向对象的应用程序结构

1 个答案: