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

Question

I am trying to rewrite a JS web-application in a more object-oriented way.

Say I have a main object called 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 || {});

I'd like to add another method which could have multiple instances, so I'll need to add a prototype: (This happens in another file)

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

I problem is that I cannot access the prototype function getID for typeA() . This is probably because of the way I have structured the application. I'd like to be able to call the prototype method like so:

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

How do I add a prototype for an object like this in a proper way?

I'm new to object-oriented Javascript and as there are so many ways to structure an object-oriented application in JS I pretty sure I am messing them up.

Answer 1

What am I doing wrong here?

child is a function that returns an object, you seem to want to make it the object itself. Also, it did return before the prototype assignment could have been done. And the prototype "object" itself was a syntactic mix between an object literal and a function.

Instead, use

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

You might also directly assign an object literal to .prototype , but that is not recommended over amending the existing object.

Is the way I am structuring my application a good practice?

Yes, it's a common pattern.