Refactoring Javascript inheritance structure

Question

I've struggled and hacked this Javascript into working:

function mmlfunc(name, evalcallback, mmlparts)
{
    this.name = name;
    // ...
}
mmlfunc.prototype.evalFunc = function()
{
    return this.evalcallback(this.args);
};
mmlfunc.prototype.getMML = function()
{
    var mml = this.mmlparts[0];
    // ...
    return mml;
}

// ...

mmlnum = jQuery.extend(true, {},
    new mmlfunc('Value',
        function() { return this.val; },
        [ '<mn>', '</mn>' ]));
mmlnum.getMML = function()
{
    return this.mmlparts[0] + this.val + this.mmlparts[1];
}

// ...
var n1 = jQuery.extend(true, {}, mmlnum),
    n2 = jQuery.extend(true, {}, mmlnum),
    n3 = jQuery.extend(true, {}, mmlnum),
    n4 = jQuery.extend(true, {}, mmlnum);

n1.val = 6;
n2.val = 7;
n3.val = 8;
n4.val = 9;

How do I get new() working on n1-n4 instead of having to use extend()? What else can I do to clean this mess up?

Thanks.

BrunoLM · Accepted Answer · 2011-05-24 01:13:09Z

1

Make mmlnum call the base constructor and then extend the prototype. Example on jsFiddle.

function mmlnum()
{
    mmlfunc.call(this,
                 "Value",
                 function() { return this.val; },
                 [ '<mn>', '</mn>' ]);
}

jQuery.extend(true, mmlnum.prototype, mmlfunc.prototype);

And then change your vars to

var n1 = new mmlnum(),
    n2 = new mmlnum(),
    n3 = new mmlnum(),
    n4 = new mmlnum();

n1.val = 6;
n2.val = 7;
n3.val = 8;
n4.val = 9;

Using alert(n1.name) will display Value.

Inheritance on MDC.

answered May 24, 2011 at 1:13

BrunoLM

101k86 gold badges311 silver badges464 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Reinderien Over a year ago

Your solution works quite well. I confess to being quite bewildered when it comes to the Javascript object model as compared to C++/C#/Java, but I'll get through it.

mVChr · Accepted Answer · 2011-05-24 00:42:51Z

It isn't so bad to create the mmlnum object and use $.extend for each n-var here. If they aren't used, then setting up your n-vars would have to look like something like this:

var n1 = new mmlfunc('Value',
                     function() { return this.val; },
                     [ '<mn>', '</mn>' ])),
    n2 = new mmlfunc('Value',
                     function() { return this.val; },
                     [ '<mn>', '</mn>' ])),
    n3 = new mmlfunc('Value',
                     function() { return this.val; },
                     [ '<mn>', '</mn>' ])),
    n4 = new mmlfunc('Value',
                     function() { return this.val; },
                     [ '<mn>', '</mn>' ]));
n1.getMML = function() {
                return this.mmlparts[0] + this.val + this.mmlparts[1];
            };
n2.getMML = function() {
                return this.mmlparts[0] + this.val + this.mmlparts[1];
            };
n3.getMML = function() {
                return this.mmlparts[0] + this.val + this.mmlparts[1];
            };
n4.getMML = function() {
                return this.mmlparts[0] + this.val + this.mmlparts[1];
            };

...which is both way less readable and less DRY. Even if there was a lot to clean up before this, I think you should leave the part you quoted as is.

Collectives™ on Stack Overflow

Refactoring Javascript inheritance structure

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related