oop - Add method with parameters to javascript object - Stack Overflow

admin管理员组

文章数量:1291045

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 putation';
}

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!

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 putation';
}

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!

• javascript
• oop
• canvas
• prototype-programming

Share Improve this question Follow edited Sep 21, 2011 at 4:09 Razor Storm asked Sep 21, 2011 at 4:04 Razor StormRazor Storm 12.3k2020 gold badges9595 silver badges151151 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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 putation';
}

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

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 putation';
    };

    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.

I remend 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.

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.

本文标签： oopAdd method with parameters to javascript objectStack Overflow