Javascript multiple inheritance

Question

can anyone please help with the below code. I am trying to understand multiple inheritance not sure why its not working. BTW below if the code for multiple inheritance. Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Test Doc</title>
    <script type="text/javascript">
    function classX(){
        this.messageX="this is X Message";
        this.alertX=function(){
            alert(this.messageX);
        };
    }
    function classY(){
        this.messageY="this is Y Message";
        this.alertY=function(){
            alert(this.messageY);
        };
    }
    function classZ(){
        classX.apply(this);
        classY.apply(this);
        this.messageZ="this is Z Message";
        this.alertZ=function(){
            alert(this.messageZ);
        };
    }
    var abjz=new classZ();
    objz.alertZ();
    abjz.alertX();
    </script>
</head>

<body>


</body>
</html>

I may be completely off base here, but wouldn't your apply want `arguments` and not `this`? (Or maybe even use `call` instead of `apply`) — Brad Christie, Sep 10 '11 at 18:14
He/she wants to have the "classX" and "classY" functions operate on the same context as the new object in the "classZ" constructor. The first argument to "apply()" is the context object to use (the `this` value). — Pointy, Sep 10 '11 at 18:15
I've written a module for that, you can download it from npm https://npmjs.org/package/nmix or github https://github.com/topcloudsystems/nmix. If you want more info on the rationale behind it, check out my blog: http://ncombo.wordpress.com/2012/12/29/javascript-multiple-inheritance/ — Jon, Dec 30 '12 at 10:32

score 16 · Answer 1 · edited May 23 '17 at 10:31

16

JavaSript does not have true multiple inheritance. You can inherit from only one prototype and then copy the rest of the properties that you want. You can test this by using the instanceof operator.

After fixing the mis-spellings, your demo works, but in actuality, you are not truly inheriting. To do true JS inheritance:

function A(){}
function B(){}
B.prototype = new A;
b = new B;
console.log(b instanceof A, b instanceof B);
//-> true, true

Quasi-Multiple Inheritance

function ctorX() {
    this.messageX = "this is X Message";
    this.alertX = function() {
        console.log(this.messageX);
    };
}

function ctorY() {
    this.messageY = "this is Y Message";
    this.alertY = function() {
        console.log(this.messageY);
    };
}

function ctorZ() {
    ctorX.call(this); // This is the quasi-multiple inheritance
    this.messageZ = "this is Z Message";
    this.alertZ = function() {
        console.log(this.messageZ);
    };
}
ctorZ.prototype = new ctorY; // This is the actual inheritance

var objz = new ctorZ();
objz.alertZ();
objz.alertY();
objz.alertX();

console.assert(objz instanceof ctorZ, 'objz is not instance of ctorZ');
console.assert(objz instanceof ctorY, 'objz is not instance of ctorY');
console.assert(objz instanceof ctorX, 'objz is not instance of ctorX');
//The last assert will fail since there is no true multiple inheritance

Demo of Quasi-Multiple Inheritance

Avoid Calling the Super Constructor

HMR brought up the point that in some instances, a user wants to inherit from a particular constructor, but the super-constructor requires parameters and will fail w/o them. The way to bypass this is to create a proxy constructor:

function C(x){if(!x) throw new Error;}
function D(){}
function proxyCtor(){/*should be noop*/}
proxyCtor.prototype = C.prototype;
D.prototype = new proxyCtor;

var d = new D;
console.assert(d instanceof C, 'c is not instance of D');
// will err if incorrect, which it's not

Demo

edited May 23 '17 at 10:31

Community

1
1

answered Sep 10 '11 at 18:20

kzh

19,810
13
73
97

I'm sorry but what's the point of the same thing twice in `log`? – pimvdb Sep 10 '11 at 18:41
Please, do not promote the `Subclass.prototype = new Class();` pattern. It's ugly and inefficient. – ZenMaster Sep 10 '11 at 18:54
7

It is the only way for the `instanceof` operator to work. In that case any inefficiency would be negligible if the whole point is to have true inheritance. Also, please don't promote the usage of the word _Class_ when describing JavaScript constructors. – kzh Sep 10 '11 at 18:57
3

@ZenMaster and you suggestion would be? – Jan 15 '13 at 14:30
1

Stumbled on this using google so maybe other would too. An example of how to inherit without calling the constructor can be found here: http://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711 – HMR Jun 27 '13 at 01:07
1

@kzh +1 for updating after so long, I used a function called addProtos to add a bunch of capabilities without inheriting code is here: http://stackoverflow.com/questions/17314264/understanding-better-javascript-oop-architecture/17314606#17314606 under "event system like implementation" The thing I'm not so happy with is that you have to call a specific init function after creating an instance. – HMR Jun 28 '13 at 00:01
@kzh I Seem to notice a problem... when you do `B.prototype = new A()`, you have inheritance but the `constructor` won't work properly and it will still point to the constructor function `A`. for fixing this, after doing `B.prototype = new A()`, you have to do this: `B.prototype.constructor = B` so that although objects of `B` are `instanceof` `A` but their constructor is `B` itself!! – Moher Sep 11 '17 at 08:29
@moher it is optional and omitted to simplify the already long answer. – kzh Sep 11 '17 at 10:45

score 6 · Accepted Answer · answered Sep 10 '11 at 18:14

6

You misspelled "abjz" in the call to "alertZ()".

With that corrected, the code works fine, as far as I can tell (two alerts show up, one for Z and one for X).

answered Sep 10 '11 at 18:14

Pointy

405,095
59
585
614

2

[Here is the jsfiddle.](http://jsfiddle.net/Pointy/eyNPr/) It works fine for me. – Pointy Sep 10 '11 at 18:18

John Middlemas · Answer 3 · 2012-07-18T14:02:59.197

Your code does not cause inheritance of classX and classY by classZ, it merely copies over their properties/methods.

Object.getOwnPropertyNames(abjz)

reveals:-

messageX,alertX,messageY,alertY,messageZ,alertZ

But for inheritance you want the alert methods to stay only in their respective classes so that any changes to them will be reflected in abjz later. Also, so that there won't be method maintenance issues if you make more instances like abjz.

You could do this:-

var classX = {}
classX.messageX = "this is X Message"
classX.alertX = function(){
    alert(this.messageX)
}

var classY = Object.create(classX)
classY.messageY = "this is Y Message"
classY.alertY = function(){
    alert(this.messageY)
}

var classZ = Object.create(classY)
classZ.messageZ = "this is Z Message"
classZ.alertZ = function(){
    alert(this.messageZ)
}

var abjz = Object.create(classZ)

which is equivalent to:-

function classX(){}
classX.prototype.messageX = "this is X Message"
classX.prototype.alertX = function(){
    alert(this.messageX)
}

function classY(){}
classY.prototype = classX.prototype
classY.prototype.messageY = "this is Y Message"
classY.prototype.alertY = function(){
    alert(this.messageY)
}

function classZ(){}
classZ.prototype = classY.prototype
classZ.prototype.messageZ = "this is Z Message"
classZ.prototype.alertZ = function(){
    alert(this.messageZ)
}

var abjz = new classZ()

Both should output:-

alert( Object.getOwnPropertyNames(abjz) ) //
abjz.alertX()                             // this is X Message
abjz.alertY()                             // this is Y Message
abjz.alertZ()                             // this is Z Message

So now abjz inherits from classZ which inherits from classY which inherits from classX in a linear prototype chain like so:-

abjz --> classZ --> classY --> classX

This is not multiple inheritance though. To get that, abjz needs to inherit directly from each of classX, classY and classZ with no chain, i.e.

abjz --> classZ
abjz --> classY
abjz --> classX

Unfortunately the JS prototype chain system does not permit this, and the flexible benefits of multiple inheritance are killed off by the ordered prototype chain. For example if you also wanted an instance cdef to inherit just from classZ and classX:-

cdef --> classZ --> classX

then in JS the classZ prototype must be changed from classY to classX and that messes up the abjz instance. Whereas in multiple inheritance:-

cdef --> classZ
cdef --> classX

classZ remains nicely unchnaged because there is no awkward chain to deal with.

Your first two large code blocks are not equivalent. `var classX = {}; classX.messageX = "this is X Message";` is not equal to `function classX(){}; classX.prototype.messageX = "this is X Message"`. The first is creating a single object with properties on it, the second is creating an (assumed) object constructor function with a prototype property. Secondly, `classY.prototype = classX.prototype` wont work properly. They might work similarly to begin with but if anything changes at runtime things will start to break. It's late for me so I am risking being completely wrong about all of this. :)~ — kalisjoshua, Feb 27 '13 at 03:51
@kalisjoshua I think you are right. In the later block the `classX.prototype.messageX = "this is X Message"` is actually `classX.prototype={messageX : "this is X Message"}`. The difference is that the property `.messageX`is not an own property of `classX` anymore as it has been in the earlier block. In the later block messageX is an own Property of the anonymously created prototype that has been set to object `classX.prototype`. Since prototype-chain and inheritance is of important here, it is not very precise (one could say wrong)to say the blocks would be equivalent. — humanityANDpeace, Nov 06 '13 at 16:38

score 1 · Answer 4 · answered Jul 13 '13 at 12:47

1

JavaScript does not give access to multiple inheritance out of the box.

To use it, you could use a class system that allow multiple inheritance like Ring.js.

answered Jul 13 '13 at 12:47

nicolas-van

935
8
13

score 1 · Answer 5 · answered Oct 11 '16 at 20:13

You can do it by creating proxies around prototypes in all the chains in the multiple inheritance tree ( in total, the tree ), and then flattening this tree and linking all these proxified prototypes in the preorder DFS traversal. You must then update [Symbol.hasInstance] on every constructor in the inheritance tree to say that this constructor does have this instance. I'm working on this here: https://github.com/dosaygo-coder-0/postjs/blob/master/posttypes/src/mixOf.js

Currently ( October 12 2016 ), the above ideas are not fully implemented.

score 0 · Answer 6 · answered Jul 23 '13 at 14:31

0

Try this library which simplifies multiple inheritance: https://github.com/meddler/inherit (see: https://github.com/meddler/inherit/blob/master/test/module/inherit/from.js#L19)

answered Jul 23 '13 at 14:31

Mateusz Charytoniuk

1,820
20
31

A Bantly · Answer 7 · 2018-04-26T18:44:56.397

In the book Beginning Node.js by Basarat Syed, he shows an inheritance pattern. This code demonstrates his way of setting up the prototype chain. It uses the util module to as a helper to link the prototype chains.

From page 91, "Javascript supports prototypical inheritance. Chapter 2 of his book explains how a prototype works. In JavaScript, a member is looked up on the current item (such as item.foo), which is followed by its prototype (item.proto.foo), which is followed by it prototype's prototype (item.proto.proto.foo), an so on until the prototype itself (for example, item.proto.proto.proto) is null." - Basarat Syed

Note: The stack overflow editor stripped of the "__" prefix and suffix from proto.

Sample code. Base class is Animal, Bird class is derived from Animal, and Superman class is derived from Bird.

var inherits = require('util').inherits;

// Animal class, the parent
function Animal(name){
    this.name = name;

    // Additional initialization code
}

Animal.prototype.walk = function(destination){
    console.log(this.name,'is walking to',destination);
}

Animal.prototype.eat = function(food){
    console.log(this.name,'is eating',food);
}

// Bird class, child of Animal
function Bird(name){
    // call the Animal constructor
    Animal.call(this,name);

    // Additional initialization code
}

Bird.prototype.fly = function(destination){
    console.log(this.name,'is flying to',destination);
}

// Setup the prototype chain from child Bird to parent Animal
inherits(Bird,Animal);

// Superman class, child of Bird
function Superman(name){
    // Call the Bird constructor
    Bird.call(this,name);

    // Additional initialization code
}

Superman.prototype.jump = function(destination){
    console.log(this.name,'jumped over a',destination);
}

// Setup the prototype chain from child Superman to parent Bird
inherits(Superman,Bird);

// Create the parent instance
var animal = new Animal('elephant');
animal.walk('melbourne');
animal.eat('grass');

// Create the child of animal instance
var bird = new Bird('sparrow');
bird.walk('sydney');
bird.fly('melbourne');
bird.eat('seeds');

// Create the child of bird instance
var superman = new Superman('Clark Kent');
superman.fly('Gotham');
superman.walk('Daily planet');
superman.jump('Building');
superman.eat('Hot dogs');

Output:

elephant is walking to melbourne
elephant is eating grass
sparrow is walking to sydney
sparrow is flying to melbourne
sparrow is eating seeds
Clark Kent is flying to Gotham
Clark Kent is walking to Daily planet
Clark Kent jumped over a Building
Clark Kent is eating Hot dogs

Javascript multiple inheritance

7 Answers7

Quasi-Multiple Inheritance

Demo of Quasi-Multiple Inheritance

Avoid Calling the Super Constructor

Demo

Linked

Related