JavaScript inheritance using prototype

Question

I've been programming for over 20 years, but have recently turned to JavaScript. Despite spending hours trawling the web, the penny hasn't yet dropped with the prototype inheritance method.

In the simplified code below, I am trying to inherit the 'name' property from the Synthesizer 'class' to the Roland 'class', but the only way I seem to be able to access it is by using 'Synth2.prototype.name' rather than by 'Synth2.name' (which returns undefined). I would like to get the approach working so that I can use 'Synth2.name', as portability is a design requirement.

I would be very grateful for any assistance.

function Synthesizer(name) {
    this.name = name;
}

function Roland(name) {
    this.prototype = new Synthesizer(name);
}

Synth1 = new Synthesizer("Analogue");
Synth2 = new Roland("Fantom G6");

document.write(Synth1.name + '<br>');
document.write(Synth2.name + '<br>');

Thanks guys! (Now updated with call to super class)...

function Synthesizer(name) {
    this.name = name;

    this.rendersound = function () {

        document.write("applying envelope to " + this.name + "<br>");

    }
}

function Roland(name) {
    Synthesizer.call(this, name);
    this.prototype = Synthesizer;

    this.Synthesizer_rendersound = this.rendersound;
    this.rendersound = function () {

        document.write("applying differential interpolation to " + this.name + "<br>");
        this.Synthesizer_rendersound(this);

    }

}

Synth1 = new Synthesizer("Analogue");
Synth2 = new Roland("Fantom G6");

document.write(Synth1.name + '<br>');
document.write(Synth2.name + '<br>');

document.write('<br>');
Synth1.rendersound();

document.write('<br>');
Synth2.rendersound();

document.write('<br>');
document.write('Synth1.prototype ' + Synth1.prototype + '<br>');
document.write('Synth2.prototype ' + Synth2.prototype + '<br>');

document.write('<br>');
document.write('Synth1.constructor ' + Synth1.constructor + '<br>');
document.write('Synth2.constructor ' + Synth2.constructor + '<br>');

Check out javascript.crockford.com/prototypal.html I think it will become more clear. — PM5544
– PM5544, Commented Nov 20, 2011 at 18:45

fflorent · Accepted Answer · 2012-01-19 10:26:06Z

1

You can do this by several way.

For example :

var Synthesizer = function(name){
   this.name = name;
}

function Roland(name) {
   Synthesizer.call(this, name); // you call the constructor of Synthesizer 
                                 // and force Synthesizer's this to be Roland's this
}
function clone(obj){
   var ret = {};
   for(var i in obj){ ret[i] = obj[i]; }
   return ret;
}
Roland.prototype = clone(Synthesizer.prototype); // inheritance of public functions

For Function.prototype.call : https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/Call

edited Jan 19, 2012 at 10:26

answered Nov 20, 2011 at 18:51

fflorent

1,66610 silver badges11 bronze badges

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

4 Comments

Ry- Over a year ago

You don't need to change it to var just to call call on it. It will work either way.

fflorent Over a year ago

@minitech yes. I changed it during some tests I made before posting. using function Synthesizer(name)... will also work, sure!

AndyC Over a year ago

Thanks guys, this is exactly what I was looking for! For the possible benefit of anyone else trying to do similar inheritance, I also managed to implement a simple way of calling to the 'Super' class function (please see update to original post).

fflorent Over a year ago

I made a mistake : if you do Roland.prototype = Synthesizer.prototype;, the public methods you create with Roland (for example : Roland.prototype.foo = function(){}) will also be created for Synthesizer. And that is not what we want. That's why we must clone Synthesizer.prototype : Roland.prototype = clone(Synthesizer.prototype); is more correct.

Ry- · Accepted Answer · 2011-11-20 18:43:50Z

1

I believe you have to set the constructor's prototype, like this:

function Synthesizer(name) {
    this.name = name;
}

function Roland(name) {
    this.name = name;
}

Roland.prototype = new Synthesizer();

Synth1 = new Synthesizer("Analogue");
Synth2 = new Roland("Fantom G6");

document.write(Synth1.name + '<br>');
document.write(Synth2.name + '<br>');

answered Nov 20, 2011 at 18:43

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

3 Comments

AndyC Over a year ago

Thanks for your answer. Although I was trying to make the inheritance take place in the class, rather than outside of it, in the interest of likely future porting to .NET / Java.

Ry- Over a year ago

@AndyC: Just put it directly after the class. Think of it as a keyword.

AndyC Over a year ago

Thanks! I think JavaScript may be tooooo flexible.

Collectives™ on Stack Overflow

JavaScript inheritance using prototype

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related