Add method with parameters to javascript object

Question

I am currently in process of porting one of my java applet games to javascript+html5. I have never done object oriented javascript before and this prototype based OO stuff is confusing me a lot.

I tried to do a straightforward port from java but am having trouble doing two things:

1) How do I run a function inside a constructor?
2) How do I add a method that has a parameter?

Heres some example code:

function User()
{
    setupStats();// I wanted to put some of the variable initializations into
    // a separate function for code modularity reasons.

    this.name='bob';

    //However that doesn't seem to work
    alert(this.gold); // gets Undefined

    alert(this.name); // gets bob. Phew at least this works

    //I also want to add a method with a parameter in it:
    this.draw=function(ctx){drawUser(ctx);};
}

function setupStats()
{
    this.gold=2;
    this.exp=3;
    this.blah='blah';
    this.that='something else';
    this.superultraomg='insert some computation';
}

function drawUser(ctx)
{
    ctx.drawImage(blah,blah,blah);
    alert(ctx); // Also gets undefined. Uh oh...

    alert(this.name); //Undefined? WHAT IS THIS I DONT EVEN...
}

Please help guys!

Solution 1

You aren't too far off. The trouble is mostly your use of the 'this' keyword.

You want something more like:

    var user = {};

    var user.setupStats = function ()
    {
        this.gold=2;
        this.exp=3;
        this.blah='blah';
        this.that='something else';
        this.superultraomg='insert some computation';
    };

    var user.init = function ()
    {
         this.name='bob';

         //Setup the stats
         this.setupStats();

         //However that doesn't seem to work
         alert(this.gold); // gets Undefined

         alert(this.name); // gets bob. Phew at least this works

         //I also want to add a method with a parameter in it:
         this.draw=function(ctx){drawUser(ctx);};
     };

You would continue this approach and execute calls against it by doing things like

user.init();

which would automatically chain your function references together.

Solution 2

Example

We are using prototype, to share the defaults in setupStats with all Users. We are using call to pass a context, being the User object, and a parameter;

function User()
{
    setupStats();// I wanted to put some of the variable initializations into
    // a separate function for code modularity reasons.

    this.name='bob';

    //However that doesn't seem to work
    alert(this.gold); // gets Undefined

    alert(this.name); // gets bob. Phew at least this works

    //I also want to add a method with a parameter in it:
    this.draw= function(ctx){ drawUser.call(this, ctx); };
}

function setupStats()
{
    this.gold=2;
    this.exp=3;
    this.blah='blah';
    this.that='something else';
    this.superultraomg='insert some computation';
}

User.prototype = new setupStats();

new User().draw('pinky');

function drawUser(ctx)
{
    //ctx.drawImage(blah,blah,blah);
    alert(ctx); // Also gets undefined. Uh oh...

    alert(this.name); //Undefined? WHAT IS THIS I DONT EVEN...
}

Comments

[awm]

Have you tested this? Looks like a number of syntax errors to me.

[fdfrye]

Nope. I was just trying to give him a little bit of an idea about function prototyping and how the scoping of the 'this' keyword can be affected. Feel free to recommend edits to make the code above more copy/paste friendly.

[Razor Storm]

I like this way of adding methods the most (simply because it makes my porting job a lot easier since it is most reminiscent of java's class based OO). However, your user.init = function() should be user.prototype.init = function(). Answer accepted :) Can someone with edit privileges fix the syntax errors though?