Javascript inheritance issue

Question

It seems I cannot correctly rewrite the class methods using the following code ...

function core() {
    console.log( "CORE CONSTRUCTOR CALLED" );
}

core.prototype.output = function() {
    return 'CORE';
}

function sub1() {
    console.log( "SUB 1 CONSTRUCTOR CALLED" );
    this.core();
}

sub1.prototype = core.prototype;
sub1.prototype.constructor = sub1;
sub1.prototype.core = core;

sub1.prototype.output = function() {
    return 'SUB 1';
}

function sub2() {
    console.log( "SUB 2 CONSTRUCTOR CALLED" );
    this.core();
}

sub2.prototype = core.prototype;
sub2.prototype.constructor = sub2;
sub2.prototype.core = core;

sub2.prototype.output = function() {
    return 'SUB 2';
}

var oCore = new core();
var oSub1 = new sub1();
var oSub2 = new sub2();

console.log( oCore.output() );
console.log( oSub1.output() );
console.log( oSub2.output() );

... I get the following output ...

CORE CONSTRUCTOR CALLED
SUB 1 CONSTRUCTOR CALLED
CORE CONSTRUCTOR CALLED
SUB 2 CONSTRUCTOR CALLED
CORE CONSTRUCTOR CALLED
SUB 2
SUB 2
SUB 2

What am I doing wrong?

Answer 1

The problem is that ... when you issue the line:

sub2.prototype = core.prototype;

You use the SAME prototype on sub2how core, so when you call .output()from ANY of the classes, the function in core.prototype.outputis the version sub2, since it is defined last, Remember that the assignment of objects occurs by reference.

To copy an object that you usually see:

sub2.prototype = new core();
sub2.prototype.core = core;

- , jQuery $.extend(sub1.prototype, core.prototype); . jQuery, :

sub2.prototype = {};
for (var method in core.prototype) sub2.prototype[method] = core.prototype[method];
sub2.prototype.constructor = core;
sub2.prototype.core = core;