Javascript Prototype - Multiple member functions

Question

I have a javascript object PathDiagramElement that has few prototype members. There is a PassiveElement object whose prototype is PathDiagramElement.

Also PassiveElement, has a lot of prototype members of its own.

var PathDiagramElement = function(){};

PathDiagramElement.prototype =  {    
    myself : "Parent",
    getTest :  function() {
        return this.myself + " function";
    }
};
var PassiveElement = function() {};
PassiveElement.prototype = new PathDiagramElement();
PassiveElement.prototype = {
         myself : "Child",
         getTestChild : function() {
                return this.myself+ " function";
    }
};

var p = new PassiveElement();
alert(p.getTestChild());
alert(p.getTest());

p.getTestChild() works fine. But p.getTest() throws undefined is not a function error.

But if I change

PassiveElement.prototype = {
         myself : "Child",
         getTestChild : function() {
                return this.myself+ " function";
    }
};

to

PassiveElement.prototype.myself = "Child";
PassiveElement.prototype.getTestChild = function() {
                return this.myself+ " function";
    }

everything works fine.

How do I define an object that has multiple prototype members of its own as well as has to use a prototype of another object?

Thanks in advance.

Think of the prototype as a chain. When you use the assignment operator (`=`) you're overwriting that chain with a new assignment. Extend the chain with dot operator (`.`) instead. — NickSuperb, Jun 23 '14 at 23:11
In Child.prototype you're replacing the entire prototype after setting it with with an instance of Parent (you should not create an instance of Parent to set Child.prototype; use Object.create instead). So you have something like `prototype = {a:22};prototype={b:44}` and then wonder what happened to prototype.a. More information about prototype constructor functions, their role and how to use it can be found here: http://stackoverflow.com/a/16063711/1641941 — HMR, Jun 24 '14 at 03:00

Wayne · Accepted Answer · 2014-06-24T16:10:11.773

You really just need a combination of the two. In the first case, you're overwriting the prototype of PassiveElement with an entirely new object. Instead, you need to create a new PathDiagramElement and then assign values to new properties on that same object, as you do in the second example. Like this:

PassiveElement.prototype = new PathDiagramElement();
PassiveElement.prototype.myself = "Child";
PassiveElement.prototype.getTestChild = function() {
    return this.myself + " function";
}

There's really no way around this. There are convenience methods for extending existing objects, but, at the end of the day, what you need is to assign values to new properties of an existing object.

Note that the following is equivalent:

var pathDiagramEl = new PathDiagramElement();
pathDiagramEl.myself = "Child";
pathDiagramEl.getTestChild = function() {
    return this.myself + " function";
}
PassiveElement.prototype = pathDiagramEl;

Do not create an instance of Parent to set prototype of Child and Child is not re using Parent constructor by calling `Parent.apply(this,arguments)`. For this particular usecase it doesn't matter but change some of the code and he'll run in trouble immediately. — HMR, Jun 24 '14 at 03:02

Javascript Prototype - Multiple member functions

1 Answers1