CODEWITHSUNDEEP
javascriptprototypal-inheritance
AndyC
AndyC

Reputation: 1

JavaScript inheritance using prototype

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>');

Upvotes: -1

Views: 468

Answers (2)

fflorent
fflorent

Reputation: 1646

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

Upvotes: 1

Ry-
Ry-

Reputation: 224856

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>');

Upvotes: 1

Related Questions