2

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.

Laurent
  • 1,292
  • 4
  • 23
  • 47
  • This question appears to be off-topic because it is about code that is working; perhaps codereview.stackexchange.com would be a better location for this question. – George Stocker Jun 26 '14 at 12:17
  • 2
    The code in the question does not work. I am asking two questions: How to make the code work and whether it's a good practice if the code would work. – Laurent Jun 26 '14 at 12:19
  • Help us out by adding a problem statement that's useful for future visitors. "This code doesn't work" isn't going to help someone who has your issue. Everyone who asks a question here does so because their code doesn't work. What doesn't work about it? what does it not do that it's supposed to do? What behavior do you see? What behavior do you *expect* to see? Edit this into your question; and improve your title so that it reflects the actual problem with your code. As far as asking "two questions", that makes this a bit of a brad question - narrow it down to one question. – George Stocker Jun 26 '14 at 12:21
  • I have edited the question so that it states a clearer problem and question. – Laurent Jun 26 '14 at 12:27
  • More on constructor functions and prototype can be found here: http://stackoverflow.com/a/16063711/1641941 – HMR Jun 26 '14 at 12:53

1 Answers1

3

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.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375