Search code examples
javascriptoopcanvasprototype-programming

Add method with parameters to javascript object


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

  • 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.