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!

Joe · Accepted Answer · 2011-09-21 04:15:04Z

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

fdfrye · Accepted Answer · 2011-09-21 04:21:37Z

3

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.

edited Sep 21, 2011 at 4:21

answered Sep 21, 2011 at 4:13

fdfrye

1,0997 silver badges14 bronze badges

3 Comments

awm Over a year ago

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

fdfrye Over a year ago

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 Over a year ago

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?

awm · Accepted Answer · 2011-09-21 04:08:02Z

0

I recommend reading JavaScript: The World's Most Misunderstood Programming Language by Douglas Crockford. He explains clearly how classes, private members, public members, inheritance, etc. are done in JavaScript.

answered Sep 21, 2011 at 4:08

awm

6,58027 silver badges24 bronze badges

Comments

awiebe · Accepted Answer · 2011-09-21 04:24:14Z

You may want to consider encasing these methods in class scope, if there is still method ambiguity you can use dot notation to resolve the namespace ambiguity. this.name works because it is defined in the same function, however other functions do not know that they are intended to exist in the same scope, thus they return undefined.

ctx is not defined in drawUser() because the parameters are declared incorrectly. Javascrpit params should be delared as (NB they do not take the var keyword):

function methodName( aParam : aParamType, bParam : bParamType) {}

classes are declared using the class keyword [optional, omit square brackets]

[private public static] class ClassName [extends ParentClass] { /*methods here*/ }

hope this helps.

Collectives™ on Stack Overflow

Add method with parameters to javascript object

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related