admin管理员组

文章数量:1128437

I've done most of my research on this on BabelJS and on MDN (which has no information at all), but please feel free to tell me if I have not been careful enough in looking around for more information about the ES6 Spec.

I'm wondering whether or not ES6 supports multiple inheritance in the same fashion as other duck-typed languages do. For instance, can I do something like:

class Example extends ClassOne, ClassTwo {
    constructor() {
    }
}

to extend multiple classes on to the new class? If so, will the interpreter prefer methods/properties from ClassTwo over ClassOne?

I've done most of my research on this on BabelJS and on MDN (which has no information at all), but please feel free to tell me if I have not been careful enough in looking around for more information about the ES6 Spec.

I'm wondering whether or not ES6 supports multiple inheritance in the same fashion as other duck-typed languages do. For instance, can I do something like:

class Example extends ClassOne, ClassTwo {
    constructor() {
    }
}

to extend multiple classes on to the new class? If so, will the interpreter prefer methods/properties from ClassTwo over ClassOne?

• javascript
• ecmascript-6

Share Improve this question Follow edited Jun 21, 2015 at 15:47 interpolack 9141010 silver badges2626 bronze badges asked Apr 26, 2015 at 15:03 BTCBTC 4,05266 gold badges2828 silver badges4242 bronze badges 3

• 8 This isn't really possible with the current way inheritance works in js, the closest you can do is a mixin – qwertymk Commented Apr 26, 2015 at 15:05
• Can you provide some kind of reference which states that this is not possible in the new spec, and if so, can you make it an answer so I can accept it? – BTC Commented Apr 26, 2015 at 15:06
• 2 Here is a pretty good writeup on the mechanics of the class feature. – Pointy Commented Apr 26, 2015 at 15:14

Add a comment  | 

29 Answers 29

Sorted by: Reset to default 140

Check my example below, super method working as expected. Using a few tricks even instanceof works (most of the time):

// base class
class A {  
  foo() {
    console.log(`from A -> inside instance of A: ${this instanceof A}`);
  }
}

// B mixin, will need a wrapper over it to be used
const B = (B) => class extends B {
  foo() {
    if (super.foo) super.foo(); // mixins don't know who is super, guard against not having the method
    console.log(`from B -> inside instance of B: ${this instanceof B}`);
  }
};

// C mixin, will need a wrapper over it to be used
const C = (C) => class extends C {
  foo() {
    if (super.foo) super.foo(); // mixins don't know who is super, guard against not having the method
    console.log(`from C -> inside instance of C: ${this instanceof C}`);
  }
};

// D class, extends A, B and C, preserving composition and super method
class D extends C(B(A)) {  
  foo() {
    super.foo();
    console.log(`from D -> inside instance of D: ${this instanceof D}`);
  }
}

// E class, extends A and C
class E extends C(A) {
  foo() {
    super.foo();
    console.log(`from E -> inside instance of E: ${this instanceof E}`);
  }
}

// F class, extends B only
class F extends B(Object) {
  foo() {
    super.foo();
    console.log(`from F -> inside instance of F: ${this instanceof F}`);
  }
}

// G class, C wrap to be used with new decorator, pretty format
class G extends C(Object) {}

const inst1 = new D(),
      inst2 = new E(),
      inst3 = new F(),
      inst4 = new G(),
      inst5 = new (B(Object)); // instance only B, ugly format

console.log(`Test D: extends A, B, C -> outside instance of D: ${inst1 instanceof D}`);
inst1.foo();
console.log('-');
console.log(`Test E: extends A, C -> outside instance of E: ${inst2 instanceof E}`);
inst2.foo();
console.log('-');
console.log(`Test F: extends B -> outside instance of F: ${inst3 instanceof F}`);
inst3.foo();
console.log('-');
console.log(`Test G: wraper to use C alone with "new" decorator, pretty format -> outside instance of G: ${inst4 instanceof G}`);
inst4.foo();
console.log('-');
console.log(`Test B alone, ugly format "new (B(Object))" -> outside instance of B: ${inst5 instanceof B}, this one fails`);
inst5.foo();

Will print out

Test D: extends A, B, C -> outside instance of D: true
from A -> inside instance of A: true
from B -> inside instance of B: true
from C -> inside instance of C: true
from D -> inside instance of D: true
-
Test E: extends A, C -> outside instance of E: true
from A -> inside instance of A: true
from C -> inside instance of C: true
from E -> inside instance of E: true
-
Test F: extends B -> outside instance of F: true
from B -> inside instance of B: true
from F -> inside instance of F: true
-
Test G: wraper to use C alone with "new" decorator, pretty format -> outside instance of G: true
from C -> inside instance of C: true
-
Test B alone, ugly format "new (B(Object))" -> outside instance of B: false, this one fails
from B -> inside instance of B: true

Link to fiddle around

An object can only have one prototype. Inheriting from two classes can be done by creating a parent object as a combination of two parent prototypes.

The syntax for subclassing makes it possible to do that in the declaration, since the right-hand side of the extends clause can be any expression. Thus, you can write a function that combines prototypes according to whatever criteria you like, and call that function in the class declaration.

My answer seems like less code and it works for me:

    class Nose {
      constructor() {
        this.booger = 'ready'; 
      }
      
      pick() {
        console.log('pick your nose')
      } 
    }
    
    class Ear {
      constructor() {
        this.wax = 'ready'; 
      }
      
      dig() {
        console.log('dig in your ear')
      } 
    }

    //class Butt { // left as an exercise for the reader
    
    class Gross extends Classes([Nose,Ear]) {
      constructor() {
        super();
        this.gross = true;
      }
    }
    
    function Classes(bases) {
      class Bases {
        constructor() {
          bases.forEach(base => Object.assign(this, new base()));
        }
      }
      bases.forEach(base => {
        Object.getOwnPropertyNames(base.prototype)
        .filter(prop => prop != 'constructor')
        .forEach(prop => Bases.prototype[prop] = base.prototype[prop])
      })
      return Bases;
    }

    
    // test it
    
    var grossMan = new Gross();
    console.log(`booger is ${grossMan.booger}!`);
    console.log(`was is ${grossMan.wax}!`);
    grossMan.pick(); // eww!
    grossMan.dig();  // yuck!

Justin Fagnani describes a very clean (imho) way to compose multiple classes into one using the fact that in ES2015, classes can be created with class expressions.

Expressions vs declarations

Basically, just like you can create a function with an expression:

function myFunction() {}      // function declaration
var myFunction = function(){} // function expression

you can do the same with classes:

class MyClass {}             // class declaration
var MyClass = class {}       // class expression

The expression is evaluated at runtime, when the code executes, whereas a declaration is executed beforehand.

Using class expressions to create mixins

You can use this to create a function that dynamically creates a class only when the function is called:

function createClassExtending(superclass) {
  return class AwesomeClass extends superclass {
    // you class body here as usual
  }
}

The cool thing about it is that you can define the whole class beforehand and only decide on which class it should extend by the time you call the function:

class A {}
class B {}
var ExtendingA = createClassExtending(A)
var ExtendingB = createClassExtending(B)

If you want to mix multiple classes together, because ES6 classes only support single inheritance, you need to create a chain of classes that contains all the classes you want to mix together. So let's say you want to create a class C that extends both A and B, you could do this:

class A {}
class B extends A {}
class C extends B {}  // C extends both A and B

The problem with this is that it's very static. If you later decide you want to make a class D that extends B but not A, you have a problem.

But with some smart trickery using the fact that classes can be expressions, you can solve this by creating A and B not directly as classes, but as class factories (using arrow functions for brevity):

class Base {} // some base class to keep the arrow functions simple
var A = (superclass) => class A extends superclass
var B = (superclass) => class B extends superclass
var C = B(A(Base))
var D = B(Base)

Notice how we only decide at the last moment which classes to include in the hierarchy.

I made a library based on these principles that you can have a look at: mics

Sergio Carneiro's and Jon's implementation requires you to define an initializer function for all but one class. Here is a modified version of the aggregation function, which makes use of default parameters in the constructors instead. Included are also some comments by me.

var aggregation = (baseClass, ...mixins) => {
    class base extends baseClass {
        constructor (...args) {
            super(...args);
            mixins.forEach((mixin) => {
                copyProps(this,(new mixin));
            });
        }
    }
    let copyProps = (target, source) => {  // this function copies all properties and symbols, filtering out some special ones
        Object.getOwnPropertyNames(source)
              .concat(Object.getOwnPropertySymbols(source))
              .forEach((prop) => {
                 if (!prop.match(/^(?:constructor|prototype|arguments|caller|name|bind|call|apply|toString|length)$/))
                    Object.defineProperty(target, prop, Object.getOwnPropertyDescriptor(source, prop));
               })
    }
    mixins.forEach((mixin) => { // outside contructor() to allow aggregation(A,B,C).staticFunction() to be called etc.
        copyProps(base.prototype, mixin.prototype);
        copyProps(base, mixin);
    });
    return base;
}

Here is a little demo:

class Person{
   constructor(n){
      this.name=n;
   }
}
class Male{
   constructor(s='male'){
      this.sex=s;
   }
}
class Child{
   constructor(a=12){
      this.age=a;
   }
   tellAge(){console.log(this.name+' is '+this.age+' years old.');}
}
class Boy extends aggregation(Person,Male,Child){}
var m = new Boy('Mike');
m.tellAge(); // Mike is 12 years old.

This aggregation function will prefer properties and methods of a class that appear later in the class list.

This isn't really possible with the way prototypical inheritance works. Lets take a look at how inherited props work in js

var parent = {a: function() { console.log('ay'); }};
var child = Object.create(parent);
child.a() // first look in child instance, nope let's go to it's prototype
          // then look in parent, found! return the method

let's see what happens when you access a prop that doesn't exist:

child.b; // first look in child instance, nope let's go to it's prototype
         // then look in parent, nope let's go to it's prototype
         // then look in Object.prototype, nope let's go to it's prototype
         // then look at null, give up and return undefined

You can use mixins to get some of that functionality but you won't get late binding:

var a = {x: '1'};
var b = {y: '2'};
var c = createWithMixin([a, b]);
c.x; // 1
c.y; // 2
b.z = 3;
c.z; // undefined

vs

var a = {x: 1}
var o = Object.create(a);
o.x; // 1
a.y = 2;
o.y; // 2

From the page es6-features.org/#ClassInheritanceFromExpressions, it is possible to write an aggregation function to allow multiple inheritance:

class Rectangle extends aggregation(Shape, Colored, ZCoord) {}

var aggregation = (baseClass, ...mixins) => {
    let base = class _Combined extends baseClass {
        constructor (...args) {
            super(...args)
            mixins.forEach((mixin) => {
                mixin.prototype.initializer.call(this)
            })
        }
    }
    let copyProps = (target, source) => {
        Object.getOwnPropertyNames(source)
            .concat(Object.getOwnPropertySymbols(source))
            .forEach((prop) => {
            if (prop.match(/^(?:constructor|prototype|arguments|caller|name|bind|call|apply|toString|length)$/))
                return
            Object.defineProperty(target, prop, Object.getOwnPropertyDescriptor(source, prop))
        })
    }
    mixins.forEach((mixin) => {
        copyProps(base.prototype, mixin.prototype)
        copyProps(base, mixin)
    })
    return base
}

But that is already provided in libraries like aggregation.

Answer

This is impossible. An object can only have one prototype in Javascript.

Workaround

You could use Object.assign which would work, but is unsafe and doesn't provide autocomplete or any type safety.

class Example {
  constructor (props) {
    Object.assign(this, new Class1(props))
    Object.assign(this, new Class2(props))
  }
}

Another way you should consider

In this example I'm assuming the goal of extending many is to be able to construct the Example class in one line, then have access to the methods in all the would-be-extended classes. If possible I'd recommend leaning towards composition instead of inheritance.

For stateful classes I'd personally recommend having the Example contain the state and use the Class1 and Class2 as tools for Example to do its job as a class that coordinates of the classes.

Optional: If the methods depend on methods in the super-class I suggest to create another BaseClass and have class Class1 extends BaseClass {}. This way the re-useable part of Example doesn't get rewritten.

class Class1 extends BaseClass {}
class Class2 extends BaseClass {}

class Example {
  class1: Class1 // Sorry for the Typescript
  class2: Class2

  constructor (props) {
    this.class1 = new Class1(props)
    this.class2 = new Class2(props)
  }
}

const example = new Example(props)
example.class1.someMethod()

Further more if you need for Example to behave as a Class1 then you could extract the interface from Class1 and forward the methods.

interface SomeBehavior {
  doBehavior(): any;
}

class Class1 implements SomeBehavior {
  doBehavior() { ... }
}

class Example implements SomeBehavior {
  class1: Class1 // Sorry for the Typescript
  class2: Class2

  constructor (props) {
    this.class1 = new Class1(props)
    this.class2 = new Class2(props)
  }

  doBehavior() {
    return this.class1.doBehavior()
  }
}

I'v come up with these solution:

'use strict';

const _         = require( 'lodash' );

module.exports  = function( ParentClass ) {

    if( ! ParentClass ) ParentClass = class {};

    class AbstractClass extends ParentClass {
        /**
         * Constructor
        **/
        constructor( configs, ...args ) {
            if ( new.target === AbstractClass )
                throw new TypeError( "Cannot construct Abstract instances directly" );

            super( args );

            if( this.defaults === undefined )
                throw new TypeError( new.target.name + " must contain 'defaults' getter" );

            this.configs = configs;
        }
        /**
         * Getters / Setters
        **/
        // Getting module configs
        get configs() {
            return this._configs;
        }
        // Setting module configs
        set configs( configs ) {
            if( ! this._configs ) this._configs = _.defaultsDeep( configs, this.defaults );
        }
    }

    return AbstractClass;
}

usage:

const EventEmitter  = require( 'events' );
const AbstractClass = require( './abstracts/class' )( EventEmitter );

class MyClass extends AbstractClass {
    get defaults() {
        return {
            works: true,
            minuses: [
                'u can have only 1 class as parent wich was\'t made by u',
                'every othere classes should be your\'s'
            ]
        };
    }
}

As long as you'r making these trick with your customly writen classes it can be chained. but us soon as u want to extend some function/class written not like that - you will have no chance to continue loop.

const EventEmitter  = require( 'events' );
const A = require( './abstracts/a' )(EventEmitter);
const B = require( './abstracts/b' )(A);
const C = require( './abstracts/b' )(B);

works for me in node v5.4.1 with --harmony flag

This ES6 solution worked for me:

multiple-inheritance.js

export function allOf(BaseClass, ...Mixins) {

  function copyProperties(target, source) {
    const allPropertyNames = Object.getOwnPropertyNames(source).concat(Object.getOwnPropertySymbols(source))

    allPropertyNames.forEach((propertyName) => {
      if (propertyName.match(/^(?:constructor|prototype|arguments|caller|name|bind|call|apply|toString|length)$/))
        return
      Object.defineProperty(target, propertyName, Object.getOwnPropertyDescriptor(source, propertyName))
    })
  }

  class Base extends BaseClass
  {
    constructor (...args) {
      super(...args)

      Mixins.forEach((Mixin) => {
        copyProperties(this, new Mixin(...args))
      })
    }
  }

  Mixins.forEach((mixin) => {
    copyProperties(Base.prototype, Mixin.prototype)
  })

  return Base
}

main.js

import { allOf } from "./multiple-inheritance.js"

class A
{
    constructor(name) {
        this.name = name
    }
    sayA() {
        return this.name
    }
}

class B
{
    constructor(name) {
        this.name = name
    }
    sayB() {
        return this.name
    }
}

class AB extends allOf(A, B)
{
    sayAB() {
        return this.name
    }
}

const ab = new AB("ab")
console.log("ab.sayA() = "+ab.sayA()+", ab.sayB() = "+ab.sayB()+", ab.sayAB() = "+ab.sayAB())

Yields on browser-console:

ab.sayA() = ab, ab.sayB() = ab, ab.sayAB() = ab

I spent half a week trying to figure this out myself, and wrote a whole article on it, https://github.com/latitov/OOP_MI_Ct_oPlus_in_JS, and hope it helps some of you.

In short, here's how MI can be implemented in JavaScript:

    class Car {
        constructor(brand) {
            this.carname = brand;
        }
        show() {
            return 'I have a ' + this.carname;
        }
    }

    class Asset {
        constructor(price) {
            this.price = price;
        }
        show() {
            return 'its estimated price is ' + this.price;
        }
    }

    class Model_i1 {        // extends Car and Asset (just a comment for ourselves)
        //
        constructor(brand, price, usefulness) {
            specialize_with(this, new Car(brand));
            specialize_with(this, new Asset(price));
            this.usefulness = usefulness;
        }
        show() {
            return Car.prototype.show.call(this) + ", " + Asset.prototype.show.call(this) + ", Model_i1";
        }
    }

    mycar = new Model_i1("Ford Mustang", "$100K", 16);
    document.getElementById("demo").innerHTML = mycar.show();

And here's specialize_with() one-liner:

function specialize_with(o, S) { for (var prop in S) { o[prop] = S[prop]; } }

Again, please look at https://github.com/latitov/OOP_MI_Ct_oPlus_in_JS.

Instead of use inheritance I recomend to use composition it's more flexible and you get the same profit that is reuse same code in different classes.

import Controller from 'your-favorite-framework';

class Example extends ClassTwoMixin(ClassOneMixin(Controller)) {
  constructor() {
  }
}

const ClassOneMixin = (superclass) => class extends superclass {}

const ClassTwoMixin = (superclass) => class extends superclass {}

To learn more about, search: "Composition over inheritance"

use Mixins for ES6 multiple Inheritence.

let classTwo = Base => class extends Base{
    // ClassTwo Code
};

class Example extends classTwo(ClassOne) {
    constructor() {
    }
}

There is no easy way to do multiple class inheritance. I follow the combination of association and inheritance to achieve this kind of behavior.

    class Person {
        constructor(firstname, lastname, age){
            this.firstname = firstname,
            this.lastname = lastname
            this.Age = age
        }

        fullname(){
                return this.firstname +" " + this.lastname;
            } 
    }

    class Organization {
        constructor(orgname){
            this.orgname = orgname;
        }
    }

    class Employee extends Person{
        constructor(firstname, lastname, age,id) {
            super(firstname, lastname, age);
            this.id = id;
        }

    }
    var emp = new Employee("John", "Doe", 33,12345);
    Object.assign(emp, new Organization("Innovate"));
    console.log(emp.id);
    console.log(emp.orgname);
    console.log(emp.fullname());

Hope this is helpful.

I will add my solution as well - I found it the most friendly for myself from what I read in this thread.

export const aggregate = (...mixins) => (Base) => {
  const copyProps = (target, source) => {
    Object.getOwnPropertyNames(source)
      .concat(Object.getOwnPropertySymbols(source))
      .forEach((prop) => {
        if (prop.match(/^(?:constructor|prototype|arguments|caller|name|bind|call|apply|toString|length)$/)) {
          return;
        }
        Object.defineProperty(target, prop, Object.getOwnPropertyDescriptor(source, prop));
      });
  };
  mixins.forEach((mixin) => {
    copyProps(Base, mixin);
    copyProps(Base.prototype, mixin.prototype);
  });
  return Base;
};

You can use it then like this:

class _MyBaseClass {}
const MyBaseClass = aggregate(ExtensionOne, ExtensionTwo)(_MyBaseClass);

in javascript you cant give to a class (constructor function) 2 different prototype object and because inheritance in javascript work with prototype soo you cant do use more than 1 inheritance for one class but you can aggregate and join property of Prototype object and that main property inside a class manually with refactoring that parent classes and next extends that new version and joined class to your target class have code for your question :

let Join = (...classList) => {

    class AggregatorClass {

        constructor() {
            classList.forEach((classItem, index) => {

                let propNames = Object.getOwnPropertyNames(classItem.prototype);

                propNames.forEach(name => {
                    if (name !== 'constructor') {
                        AggregatorClass.prototype[name] = classItem.prototype[name];
                    }
                });
            });

            classList.forEach(constructor => {
                Object.assign(AggregatorClass.prototype, new constructor())
            });
        }
    }


    return AggregatorClass

};

The solution below (class cloning by copying the instance fields and prototype properties) works for me. I am using normal JS (i.e. not Typescript), with JsDoc annotations and VSCode for compile-time type checking.

The solution interface is very simple:

class DerivedBase extends cloneClass(Derived, Base) {}

//To add another superclass:
//class Der1Der2Base extends cloneClass(Derived2, DerivedBase)

let o = new DerivedBase()  

The classes involved can be created just like normal ES6 classes.

However the following needs to be done:

• Use isInstanceOf() instead of the builtin operator instanceof.
• Instead of using 'super' to call non-constructor members of the base class, use the function super2() instead.
• Don't write any code in the constructors, instead write it in a class method called 'init()' that is in turn called by the constructor. See the example below.

/* Paste the entire following text into the browser's dev console */
/* Tested on latest version of Chrome, Microsoft Edge and FireFox (Win OS)*/
/* Works with JSDoc in VSCode */
/* Not tested on minified/obfuscated code */

//#region library

const log = console.log

/**
 * abbreviation for Object.getPrototypeOf()
 * @param {any} o
 */
function proto(o) { return Object.getPrototypeOf(o) }

/** @param {function} fn */
function callIfNonNull(fn) { if (fn != null) { return fn() } }

/**
 * @param {boolean} b
 * @param {()=>string} [msgFn]
 */
function assert(b, msgFn) {
    if (b) { return }
    throw new Error('assert failed: ' + ((msgFn == null) ? '' : msgFn()))
}

/** @param {any} o */
function asAny(o) { return o }

/**
 * Use this function instead of super.<functionName>
 * @param {any} obj
 * @param {string} attr the name of the function/getter/setter
 * @param {any} cls the class for the current method
 * @param {any[]} args arguments to the function/getter/setter
 */
function super2(obj, attr, cls, ...args) {
    let nms = clsNms(obj)
    assert(nms[0] == nms[1])
    const objCls = proto(obj)
    const superObj = proto(ancestorNamed(objCls, cls.name))
    assert(superObj != obj)
    const attrDscr = getOwnOrBasePropDscr(superObj, attr)
    if (attrDscr == null) { return null }
    let attrVal = attrDscr['value']
    const attrGet = attrDscr['get']
    const attrSet = attrDscr['set']
    if (attrVal == null) {
        if (attrGet != null) {
            if (attrSet != null) {
                assert([0, 1].includes(args.length))
                attrVal = ((args.length == 0) ? attrGet : attrSet)
            } else {
                assert(args.length == 0,
                    () => 'attr=' + attr + ', args=' + args)
                attrVal = attrGet
            }
        } else if (attrSet != null) {
            assert(args.length == 1)
            attrVal = attrSet
        } else {
            assert(false)//no get or set or value!!!!
        }
        assert(typeof attrVal == 'function')
    }
    if (typeof attrVal != 'function') { return attrVal }
    const boundFn = attrVal.bind(obj)
    return boundFn(...args)
}

/**
 * Use this function to call own prop instead of overriden prop
 * @param {any} obj
 * @param {string} attr the name of the function/getter/setter
 * @param {any} cls the class for the current method
 * @param {any[]} args arguments to the function/getter/setter
 */
function ownProp(obj, attr, cls, ...args) {
    let protoObj = ancestorNamed(proto(obj), cls.name)
    const attrDscr = Object.getOwnPropertyDescriptor(protoObj, attr)
    if (attrDscr == null) {
        log(`ownProp(): own property '${attr}' does not exist...`)
        return null
    }
    let attrVal = attrDscr['value']
    const attrGet = attrDscr['get']
    const attrSet = attrDscr['set']
    if (attrVal == null) {
        if (attrGet != null) {
            if (attrSet != null) {
                assert([0, 1].includes(args.length))
                attrVal = ((args.length == 0) ? attrGet : attrSet)
            } else {
                assert(args.length == 0,
                    () => 'attr=' + attr + ', args=' + args)
                attrVal = attrGet
            }
        } else if (attrSet != null) {
            assert(args.length == 1)
            attrVal = attrSet
        } else {
            assert(false)//no get or set or value!!!!
        }
        assert(typeof attrVal == 'function')
    }
    if (typeof attrVal != 'function') {
        log(`ownProp(): own property '${attr}' not a fn...`)
        return attrVal
    }
    const boundFn = attrVal.bind(obj)
    return boundFn(...args)
}

/**
 * @param {any} obj
 * @param {string} nm
 */
function getOwnOrBasePropDscr(obj, nm) {
    let rv = Object.getOwnPropertyDescriptor(obj, nm)
    if (rv != null) { return rv }
    let protObj = proto(obj)
    if (protObj == null) { return null }
    return getOwnOrBasePropDscr(protObj, nm)
}

/**
 * @param {any} obj
 * @param {string} nm
 */
function ancestorNamed(obj, nm) {
    const ancs = ancestors(obj)
    for (const e of ancs) {
        if ((e.name || e.constructor.name) == nm) { return e }
    }
}

/**
 * @template typeOfDerivedCls
 * @template typeOfBaseCls
 * @param {typeOfDerivedCls} derivedCls
 * @param {typeOfBaseCls} baseCls
 * @returns {typeOfDerivedCls & typeOfBaseCls}
 */
function cloneClass(derivedCls, baseCls) {
    const derClsNm = derivedCls['name'], baseClsNm = baseCls['name']
    const gbl = globalThis

    //prevent unwanted cloning and circular inheritance:
    if (isInstanceOf(baseCls, asAny(derivedCls))) { return asAny(baseCls) }
    if (isInstanceOf(derivedCls, asAny(baseCls))) { return asAny(derivedCls) }

    //Object does not derive from anything; it is the other way round:
    if (derClsNm == 'Object') { return cloneClass(baseCls, derivedCls) }

    //use cached cloned classes if available
    if (gbl.clonedClasses == null) { gbl.clonedClasses = {} }
    const k = derClsNm + '_' + baseClsNm, kVal = gbl.clonedClasses[k]
    if (kVal != null) { return kVal }

    //clone the base class of the derived class (cloning occurs only if needed)
    let derBase = cloneClass(proto(derivedCls), baseCls)

    //clone the derived class

    const Clone = class Clone extends derBase {

        /**  @param {any[]} args */
        constructor(...args) {
            super(...args)
            ownProp(this, 'init', Clone, ...args)
        }
    }

    //clone the properties of the derived class
    Object.getOwnPropertyNames(derivedCls['prototype'])
        .filter(prop => prop != 'constructor')
        .forEach(prop => {
            const valToSet =
                Object.getOwnPropertyDescriptor(derivedCls['prototype'], prop)
            if (typeof valToSet == 'undefined') { return }
            Object.defineProperty(Clone.prototype, prop, valToSet)
        })

    //set the name of the cloned class to the same name as its source class:
    Object.defineProperty(Clone, 'name', { value: derClsNm, writable: true })

    //cache the cloned class created
    gbl.clonedClasses[k] = Clone
    log('Created a cloned class with id ' + k + '...')
    return asAny(Clone)
}

/**
 * don't use instanceof throughout your application, use this fn instead
 * @param {any} obj
 * @param {Function} cls
 */
function isInstanceOf(obj, cls) {
    if (obj instanceof cls) { return true }
    return clsNms(obj).includes(cls.name)
}

/** @param {any} obj */
function clsNms(obj) {
    return ancestors(obj).map(/** @param {any} e */ e =>
        e.name || e.constructor.name)
}

/**
 * From: https://gist.github.com/ceving/2fa45caa47858ff7c639147542d71f9f
 * Returns the list of ancestor classes.
 *
 * Example:
 *   ancestors(HTMLElement).map(e => e.name || e.constructor.name)
 *   => ["HTMLElement", "Element", "Node", "EventTarget", "Function", "Object"]
 * @param {any} anyclass
 */
function ancestors(anyclass) {
    if (anyclass == null) { return [] }
    return [anyclass, ...(ancestors(proto(anyclass)))]
}

//#endregion library

//#region testData
class Base extends Object {

    /** @param {any[]} args */
    constructor(...args) {//preferably accept any input
        super(...args)
        ownProp(this, 'init', Base, ...args)
    }

    /** @param {any[]} _args */
    init(..._args) {
        log('Executing init() of class Base...')
        //TODO: add code here to get the args as a named dictionary

        //OR, follow a practice of parameterless constructors and
        //initial-value-getting methods for class field intialization

        /** example data field of the base class */
        this.baseClsFld = 'baseClsFldVal'
    }

    m1() { log('Executed base class method m1') }

    b1() { log('Executed base class method b1') }

    get baseProp() { return 'basePropVal' }
}

class Derived extends Object {//extend Object to allow use of 'super'

    /** @param {any[]} args */
    constructor(...args) {//convention: accept any input
        super(...args)
        ownProp(this, 'init', Derived, ...args)
    }

    /** @param {any[]} _args */
    init(..._args) {
        log('Executing init() of class Derived...')
        this.derClsFld = 'derclsFldVal'
    }

    m1() {
        const log = /** @param {any[]} args */(...args) =>
            console.log('Derived::m1(): ', ...args)
        log(`super['m1']: `, super['m1'])
        super2(this, 'm1', Derived)

        log(`super['baseProp']`, super['baseProp'])

        log(`super2(this, 'baseProp', Derived)`,
            super2(this, 'baseProp', Derived))

        log(`super2(this, 'nonExistentBaseProp', Derived)`,
            super2(this, 'nonExistentBaseProp', Derived))
    }

    m2() {
        log('Executed derived class method 2')
    }
}

class DerivedBase extends cloneClass(Derived, Base) {

    /** @param {any[]} args */
    constructor(...args) {
        super(...args)
        ownProp(this, 'init', DerivedBase, ...args)
    }

    /** @param {any[]} _args */
    init(..._args) {
        log('Executing init() of class DerivedBase...')
    }
}

log('Before defining o (object of DerivedBase)...')
let o = new DerivedBase()
log('After defining o (object of DerivedBase)...')

class Derived2 extends Base {

    /** @param {any} args */
    constructor(...args) {
        //convention/best practice: use passthrough constructors for the classes
        //you write
        super(...args)
        ownProp(this, 'init', Derived2, ...args)
    }

    /**
     * @param {any[]} _args
     */
    init(..._args) {
        log('Executing init() of class Derived2...')
    }

    derived2func() { log('Executed Derived2::derived2func()') }
}

class Der1Der2Base extends cloneClass(Derived2, DerivedBase) {

    /** @param {any} args */
    constructor(...args) {
        //convention/best practice: use passthrough constructors for the classes
        //you write
        super(...args)
        ownProp(this, 'init', Der1Der2Base, ...args)
    }

    /** @param {any[]} _args */
    init(..._args) {
        log('Executing original ctor of class Der1Der2Base...')
    }

}

log('Before defining o2...')
const o2 = new Der1Der2Base()
log('After defining o2...')

class NotInInheritanceChain { }
//#endregion testData

log('Testing fields...')
log('o.derClsFld:', o.derClsFld)
log('o.baseClsFld:', o.baseClsFld)
//o.f3  JSDoc gives error in VSCode

log('Test method calls')
o.b1()
o.m1()
o.m2()
//o.m3() //JSDoc gives error in VSCode
log('Test object o2')
o2.b1()
o2.m1()
o2.derived2func()

//don't use instanceof throughout your application, use this fn instead
log('isInstanceOf(o,DerivedBase)', isInstanceOf(o, DerivedBase))
log('isInstanceOf(o,Derived)', isInstanceOf(o, Derived))
log('isInstanceOf(o,Base)', isInstanceOf(o, Base))

log('isInstanceOf(o,NotInInheritanceChain)',
    isInstanceOf(o, NotInInheritanceChain))

A note of caution: the JSDoc intersection operator & may not always work. In that case some other solution may need to be used. For example, a separate interface class may need to be defined that will 'manually' combine the 2 classes. This interface class can extend from one of the classes and the other class's interface can be automatically implemented using VsCode quick fix option.

I write to understand and add flexibility to js programming. This code was written with reference to the code above.

class A{
    constructor(name)
    {
        this.name=name;
    }
    getname=function(){return this.name};
    }
    B=(x)=>(class B extends (()=>x||Object)(){
    constructor(surname,name)
    {   super(name);
        this.surname=surname;
    }
    getsurname(){return this.surname};
    })
    class C extends B(A){
    constructor(name,surname)
    {
        super(surname,name);
    }
    getfullname(){return this.name+" "+this.surname};
    };

    let person=new C("Ed","Boon");
    console.log(person.getname());//output Ed
    console.log(person.getsurname());//output Boon
    console.log(person.getfullname());//output Ed Boon
    console.log(person);
  console.log(person.__proto__.constructor); //person.__proto__  properties inherit from C class
   console.log(person.__proto__.__proto__.constructor); //person.__proto__.__proto__  properties inherit from B class
   console.log(person.__proto__.__proto__.__proto__.constructor); //person.__proto__.__proto__ .__proto__  properties inherit from A class

note: person instanceof A true but person instanceof B false, because B seem as function. B only appears as a class, inside run a code defined in class B.

I add second alternative way

   

 //extendsClass function using for create temporary extendedfirst argument baseClass ,other arguments is classes using for inherit
      function extendsClass(...cls)
{
  let str="";

   for (let i=arguments.length-1;i>0;i--)
    {
       str+=(i==1?"(":"")+(arguments[i-1]+"").replace(RegExp(arguments[i-1].name+"({|\\s.*{)?"),arguments[i-1].name+" extends "+arguments[i].name+" {").replaceAll("//super","super")+(i==1?")":"");
       
    }
    return eval(str);
}
        class A{
        constructor(name)
        {
            this.name=name;
        }
        getname=function(){return this.name};
        run(){console.log(`instance of A ${this instanceof A}`)};
        }
        class B {
        constructor(surname,name)
        {   
            //super(name);
            this.surname=surname;
        }
        getsurname(){return this.surname};
        run(){
            //super.run();
        console.log(`instance of B ${this instanceof B}`)};
        }
        class C {
        constructor(name,surname)
        {
          //super(surname,name);
        }

        getfullname(){return this.name+" "+this.surname};
        };
         class D extends extendsClass(C,B,A) {
        constructor(name,surname,address)
        {
          super(name,surname);
          this.address=address;
        }
        }   
//extendsClass function create temprory, class C extends from B,B extends from A, A class dont create temporary stay as global class.
        var person=new (extendsClass(C,B,A))("Ed","Boon");
        console.log(person.getname());//output Ed
        console.log(person.getsurname());//output Boon
        console.log(person.getfullname());//output Ed Boon
        person.run();
        var person2=new D("Cem","Firat","A place in the world");
        console.log(person2.getname());//output Cem
        console.log(person2.getsurname());//output Firat
        console.log(person.getfullname());//output Cem Firat
        person2.run();

I created a library that lets you fake multi inheritance in es6. The mini library preprocesses the code using some of the above code. and uses mixins to emulate multiple class inheritance. There is a significant difference between using mixins and native multiple inheritance.

Mixins in JavaScript are a way to reuse code between different classes. A mixin is a class whose methods can be reused in other classes, without there being a formal inheritance relationship. Mixins allow you to share methods between different classes, but they do not imply a hierarchical relationship between the classes.

On the other hand, multiple inheritance is a feature of some object-oriented programming languages in which a class can inherit from more than one superclass. This can lead to a much more complex hierarchy of classes, but it can also offer more flexibility.

It’s important to note that JavaScript does not natively support multiple inheritance. This is a deliberate design choice by the creators of the language to reduce complexity and avoid certain problems that can occur with multiple inheritance (such as the diamond problem).

Therefore, although mixins in JavaScript can fulfill a similar function as multiple inheritance in some other languages, they are not the same and have different implications for the design and structure of your code. Using mixins can be a powerful way to share and reuse code in JavaScript, while avoiding some of the pitfalls of multiple inheritance.

For example now you can do this:

class a{

    methodA() {

        console.log( "Say, Hi" )

    }

}

class b{

    pleaseCallAMethodOfA() {

        this.methodA();

    }

}


class c extends a, b{

}

var instanceC = new c();

instanceC.pleaseCallAMethodOfA();

Or this:

class a{

    constructor( a ) {

        this.otherTest = a;

    }

}

class b{

    constructor( a ) {

        this.test = a;

    }

    testSuper() {

        console.log( this.test + this.otherTest );

    }

}


class c extends a, b{

    constructor() {

        super( 10 );

    }

}

var instance = new c();

instance.testSuper();

You can extend as many classes as you want, Not only 2. You can find the code here:

https://code.unifyjs.org/TheUnifiedCompany/JS-Class-Multiple-inheritance/

use extent with custom function to handle multiple inheritance with es6

var aggregation = (baseClass, ...mixins) => {
    let base = class _Combined extends baseClass {
        constructor (...args) {
            super(...args)
            mixins.forEach((mixin) => {
                mixin.prototype.initializer.call(this)
            })
        }
    }
    let copyProps = (target, source) => {
        Object.getOwnPropertyNames(source)
            .concat(Object.getOwnPropertySymbols(source))
            .forEach((prop) => {
            if (prop.match(/^(?:constructor|prototype|arguments|caller|name|bind|call|apply|toString|length)$/))
                return
            Object.defineProperty(target, prop, Object.getOwnPropertyDescriptor(source, prop))
        })
    }
    mixins.forEach((mixin) => {
        copyProps(base.prototype, mixin.prototype)
        copyProps(base, mixin)
    })
    return base
}

class Colored {
    initializer ()     { this._color = "white" }
    get color ()       { return this._color }
    set color (v)      { this._color = v }
}

class ZCoord {
    initializer ()     { this._z = 0 }
    get z ()           { return this._z }
    set z (v)          { this._z = v }
}

class Shape {
    constructor (x, y) { this._x = x; this._y = y }
    get x ()           { return this._x }
    set x (v)          { this._x = v }
    get y ()           { return this._y }
    set y (v)          { this._y = v }
}

class Rectangle extends aggregation(Shape, Colored, ZCoord) {}

var rect = new Rectangle(7, 42)
rect.z     = 1000
rect.color = "red"
console.log(rect.x, rect.y, rect.z, rect.color)

As a proof of concept, I did the following function. It takes a list of classes and composes them into a new class (the last prototype wins so there are no conflicts). When creating a composed function, the user can choose to use all original constructors [sic!] or pass their own. This was the biggest challenge of this experiment: to come up with a description of what constructor should do. Copying methods into a prototype is not an issue but what's the intended logic of newly composed object. Or maybe it should be constructorless? In Python, from what I know, it finds the matching constructor but functions in JS are more accepting, hence one can pass to a function just about everything and from signature it won't be clear.

I don't think it's optimised but the purpose was exploring possibilities. instanceof will not behave as expected which, I guess, is a bummer, since class-oriented developers like to use this as a tool.

Maybe JavaScript just doesn't have it.

/*
    (c) Jon Krazov 2019

    Below is an experiment searching boundaries of JavaScript.
    It allows to compute one class out of many classes.

    Usage 1: Without own constructor

    If no constructor is passed then constructor of each class will be called
    with params passed in object. In case of missing params, constructor
    will be called without params.

    Example:

    const MyClass1 = computeClass([Class1, Class2, Class3]);
    const myClass1Instance = new MyClass1({
        'Class1': [1, 2],
        'Class2': ['test'],
        'Class3': [(value) => value],
    });

    Usage 2: With own constructor

    If constructor is passed in options object (second param) then it will
    be called in place of constructors of all classes.

    Example:

    const MyClass2 = computeClass([Class1, Class2, Class3], {
        ownConstructor(param1) {
            this.name = param1;
        }
    });
    const myClass2Instance = new MyClass2('Geoffrey');
*/

// actual function

var computeClass = (classes = [], { ownConstructor = null } = {}) => {
    const noConstructor = (value) => value != 'constructor';

    const ComputedClass = ownConstructor === null
        ? class ComputedClass {
            constructor(args) {
                classes.forEach((Current) => {
                    const params = args[Current.name];

                    if (params) {
                        Object.assign(this, new Current(...params));
                    } else {
                        Object.assign(this, new Current());
                    }
                })
            }
        }
        : class ComputedClass {
            constructor(...args) {
                if (typeof ownConstructor != 'function') {
                    throw Error('ownConstructor has to be a function!');
                }
                ownConstructor.call(this, ...args);
            } 
        };

    const prototype = classes.reduce(
        (composedPrototype, currentClass) => {
            const partialPrototype = Object.getOwnPropertyNames(currentClass.prototype)
                .reduce(
                    (result, propName) =>
                        noConstructor(propName)
                            ? Object.assign(
                                    result,
                                    { [propName]: currentClass.prototype[propName] }
                                )
                            : result,
                    {}
                );

            return Object.assign(composedPrototype, partialPrototype);
        },
        {}
    );

    Object.entries(prototype).forEach(([prop, value]) => {
	Object.defineProperty(ComputedClass.prototype, prop, { value });
    });
    
    return ComputedClass;
}

// demo part

var A = class A {
    constructor(a) {
        this.a = a;
    }
    sayA() { console.log('I am saying A'); }
}

var B = class B {
    constructor(b) {
        this.b = b;
    }
    sayB() { console.log('I am saying B'); }
}

console.log('class A', A);
console.log('class B', B);

var C = computeClass([A, B]);

console.log('Composed class');
console.log('var C = computeClass([A, B]);', C);
console.log('C.prototype', C.prototype);

var c = new C({ A: [2], B: [32] });

console.log('var c = new C({ A: [2], B: [32] })', c);
console.log('c instanceof A', c instanceof A);
console.log('c instanceof B', c instanceof B);

console.log('Now c will say:')
c.sayA();
c.sayB();

console.log('---');

var D = computeClass([A, B], {
    ownConstructor(c) {
        this.c = c;
    }
});

console.log(`var D = computeClass([A, B], {
    ownConstructor(c) {
        this.c = c;
    }
});`);

var d = new D(42);

console.log('var d = new D(42)', d);

console.log('Now d will say:')
d.sayA();
d.sayB();

console.log('---');

var E = computeClass();

console.log('var E = computeClass();', E);

var e = new E();

console.log('var e = new E()', e);

Originally posted here (gist.github.com).

I have been using a pattern like this to program complex multi inheritance things:

var mammal = {
    lungCapacity: 200,
    breath() {return 'Breathing with ' + this.lungCapacity + ' capacity.'}
}

var dog = {
    catchTime: 2,
    bark() {return 'woof'},
    playCatch() {return 'Catched the ball in ' + this.catchTime + ' seconds!'}
}

var robot = {
    beep() {return 'Boop'}
}


var robotDogProto = Object.assign({}, robot, dog, {catchTime: 0.1})
var robotDog = Object.create(robotDogProto)


var livingDogProto = Object.assign({}, mammal, dog)
var livingDog = Object.create(livingDogProto)

This method uses very little code, and allows for things like overwriting default properties (like I do with a custom catchTime in robotDogProto)

I faced the same problem recently. I created a series of model-like classes and wanted to create a few interface-like classes to extend my models. HasGuid or HasName. Only to realise that JS classes don't support multiple inheritance. I've created the solution below. Default values are also copied. I guess you can also use it to sync 2 objects after they have some values in them.

Only disadvantage is that you have to provide an instance instead of a class name.

export default class JsExtend
{
    static extend(target, owner)
    {
        const METHOD_BLACKLIST = ['constructor'];

        /**
         * Methods
         */
        Object.getOwnPropertyNames(Object.getPrototypeOf(owner)).forEach(key => {
            
            if (METHOD_BLACKLIST.includes(key) == false)
                target[key] = owner[key];
        });

        /**
         * Properties - keys
         */
        Object.keys(owner).forEach(key => {
            target[key] = owner[key];
        });
    }
}

Usage:

export default class VideoModel
{

    constructor()
    {
        JsExtend.extend(this, new HasGuid());
        JsExtend.extend(this, new CanCreate());
    }
}

EDIT: Static properties / methods are copied as normal methods!

Extending from Multiple has two hacky solutions:

• Aggregating mixins to a base class
• Wrapping an extend base class as a mixin function

Aggregating mixins to a base class

There are thousand of implementations out there but this is my implementation:

const aggregator = (base, ...mixins) => {
  const blackList = /^(?:constructor|prototype|arguments|caller|name|bind|call|apply|toString|length)$/
  const copyAttributes = (target, source) => {
    Object.getOwnPropertyNames(source)
      .concat(Object.getOwnPropertySymbols(source))
      .forEach(prop => {
        if (prop.match(blackList)) return
        Object.defineProperty(target, prop, Object.getOwnPropertyDescriptor(source, prop))
      })
  }

  return class extends base {
    constructor(...args) {
      super(...args)
      for (const mixin of mixins) {
        const target = this.constructor
        copyAttributes(target.prototype, mixin.prototype)
        copyAttributes(target, mixin)
      }
    }
  }
}

The idea is very simple, it returns and extended class of a base class. Inside this extended class we copy attributes and functions of each mixin.

Here is a working snippet with some tests.

const aggregator = (base, ...mixins) => {
  const blackList = /^(?:constructor|prototype|arguments|caller|name|bind|call|apply|toString|length)$/
  const copyAttributes = (target, source) => {
    Object.getOwnPropertyNames(source)
      .concat(Object.getOwnPropertySymbols(source))
      .forEach(prop => {
        if (prop.match(blackList)) return
        Object.defineProperty(target, prop, Object.getOwnPropertyDescriptor(source, prop))
      })
  }

  return class extends base {
    constructor(...args) {
      super(...args)
      for (const mixin of mixins) {
        const target = this.constructor
        copyAttributes(target.prototype, mixin.prototype)
        copyAttributes(target, mixin)
      }
    }
  }
}


class A {
  foo() {
    console.log(`from A -> inside instance of A: ${this instanceof A}`)
  }
}

class B {
  foo() {
    if (super.foo) super.foo()
    console.log(`from B -> inside instance of B: ${this instanceof B}`)
  }
}

class C {
  foo() {
    if (super.foo) super.foo()
    console.log(`from C -> inside instance of C: ${this instanceof C}`)
  }
}

// D class, extends A and aggregates B and C
const CBA = aggregator(A, B, C)
class D extends CBA {
  foo() {
    if (super.foo) super.foo()
    console.log(`from D -> inside instance of D: ${this instanceof D}`)
  }
}

// E class, extends A and aggregates C
const CA = aggregator(A, C)
class E extends CA {
  foo() {
    if (super.foo) super.foo()
    console.log(`from E -> inside instance of E: ${this instanceof E}`)
  }
}

// F class, extends B
class F extends B {
  foo() {
    if (super.foo) super.foo()
    console.log(`from F -> inside instance of F: ${this instanceof F}`)
  }
}

// G class, C wrap to be used with new decorator, pretty format
class G extends aggregator(C) {}

// H class, extends B
const H = aggregator(B)

// J class, extends Object and aggregates B
const J = aggregator(Object, B)

const d = new D()
const e = new E()
const f = new F()
const g = new G()
const h = new H()
const j = new J()

console.log(`Test D:
Class: D extends A, and aggregates B and C
Instance of D: ${d instanceof D}`)
d.foo()
console.log('-')

console.log(`Test E:
Class: E extends A, and aggregates C
Instance of E: ${e instanceof E}`)
e.foo()
console.log('-')
console.log(`Test F: 
Class: F extends B
Instance of F: ${f instanceof F}`)
f.foo()
console.log('-')
console.log(`Test G:
Class: G wrapped to use C alone with "new" decorator
Instance of G: ${g instanceof G}`)
g.foo()
console.log('-')
console.log(`Test H:
Class: H extend B,
Instanceof B: ${h instanceof B}`)
h.foo()
console.log('-')
console.log(`Test J:
Class: H extend Object,
Instance of B: ${j instanceof B}, this one fails`)
h.foo()

The problem with this implementation is that is only extending the base class. This case is more obvious in the Test J:

Wrapping an extend base class as a mixin function

A direct solution is using a mixin function wrapper. But everything has its own cost. The cost of this approach is that we need to modify some classes as mixin function wrapper. Let's use the previous snippet as example.

We will convert B and C classes as mixin wrappers like this:

// B mixin
const B = c => class extends c {
  foo() {
    if (super.foo) super.foo()
    console.log(`[from B] is instance of B: ${this instanceof c}`)
  }
}

// C mixin
const C = c => class extends c {
  foo() {
    if (super.foo) super.foo()
    console.log(`[from C] is instance of C: ${this instanceof c}`)
  }
}

Now we extend into a regular class like this:

// D class, extends A class and B and C mixins
class D extends C(B(A)) {
  foo() {
    if (super.foo) super.foo()
    console.log(`[from D] is instance of D: ${this instanceof D}`)
  }
}

Here is a working snippet with some test:

class A {
  foo() {
    console.log(`[from A] is instance of A: ${this instanceof A}`)
  }
}

// B mixin
const B = c => class extends c {
  foo() {
    if (super.foo) super.foo()
    console.log(`[from B] is instance of B: ${this instanceof c}`)
  }
}

// C mixin
const C = c => class extends c {
  foo() {
    if (super.foo) super.foo()
    console.log(`[from C] is instance of C: ${this instanceof c}`)
  }
}

// D class, extends A class and B and C mixins
class D extends C(B(A)) {
  foo() {
    if (super.foo) super.foo()
    console.log(`[from D] is instance of D: ${this instanceof D}`)
  }
}

// E class, extends A class and C mixin
class E extends C(A) {
  foo() {
    if (super.foo) super.foo()
    console.log(`[from E] is instance of E: ${this instanceof E}`)
  }
}

// F class, extends B mixin
class F extends B(Object) {
  foo() {
    if (super.foo) super.foo()
    console.log(`[from F] is instance of F: ${this instanceof F}`)
  }
}

// G class, wraps C mixin. Will use new decorator for instantiation, pretty format
class G extends C(Object) {}

const d = new D()
const e = new E()
const f = new F()
const g = new G()
const h = new (B(Object))

console.log(`Test D:
Class: D extends A, B and C
Instance of D: ${d instanceof D}`)
d.foo()
console.log('-')

console.log(`Test E:
Class: E extends A and C
Instance of E: ${e instanceof E}`)
e.foo()
console.log('-')
console.log(`Test F: 
Class: F extends B
Instance of F: ${f instanceof F}`)
f.foo()
console.log('-')
console.log(`Test G:
Class: G wrapped to use C alone with "new" decorator
Instance of G: ${g instanceof G}`)
g.foo()
console.log('-')

const isInstanceOfB = i => {
  try {
    return i instanceof B
  } catch (e) {
    return false
  }
}
console.log(`Test H:
Class: Anonymous class extends Object 
Instance of B: ${isInstanceOfB(h)}
Instance of Object: ${h instanceof Object}`)
h.foo()

Test D clearly shows that D class is extending A, B and C.

Test D:
Class: D extends A, B and C
Instance of D: true
[from A] is instance of A: true
[from B] is instance of B: true
[from C] is instance of C: true
[from D] is instance of D: true

Also, we can appreciate in Test H H does not extends B because is a mixin that extends

Test H:
Class: Anonymous class does has a prototype 'undefined' 
Instance of B: false
Instance of Object: true
[from B] is instance of B: true

Also we can add a builder for better syntax like this:

const extender = base => new MixinBuilder(base)

// Our helper class that will make things look better
class MixinBuilder {
  constructor(base) {
    this.base = base;
  }
  with(...mixins) {
    return mixins.reduce((c, mixin) => mixin(c), this.base);
  }
}

const extender = base => new MixinBuilder(base)

class MixinBuilder {
  constructor(base) {
    this.base = base
  }
  
  with(...mixins) {
    return mixins.reduce((c, mixin) => mixin(c), this.base)
  }
}

class A {
  foo() {
    console.log(`[from A] is instance of A: ${this instanceof A}`)
  }
}

// B mixin
const B = c => class extends c {
  foo() {
    if (super.foo) super.foo()
    console.log(`[from B] is instance of B: ${this instanceof c}`)
  }
}

// C mixin
const C = c => class extends c {
  foo() {
    if (super.foo) super.foo()
    console.log(`[from C] is instance of C: ${this instanceof c}`)
  }
}

// D class, extends A class and B and C mixins
const ABC = extender(A).with(B,C)
class D extends ABC {
  foo() {
    if (super.foo) super.foo()
    console.log(`[from D] is instance of D: ${this instanceof D}`)
  }
}

// E class, extends A class and C mixin
const AC = extender(A).with(C)
class E extends AC {
  foo() {
    if (super.foo) super.foo()
    console.log(`[from E] is instance of E: ${this instanceof E}`)
  }
}

// F class, extends Object and B mixin
class F extends extender(Object).with(B) {
  foo() {
    if (super.foo) super.foo()
    console.log(`[from F] is instance of F: ${this instanceof F}`)
  }
}

// G class, wraps C mixin. Will use new decorator for instantiation, pretty format
class G extends extender(Object).with(C) {}

const d = new D()
const e = new E()
const f = new F()
const g = new G()
const h = new (extender(Object).with(B))

console.log(`Test D:
Class: D extends A, B and C
Instance of D: ${d instanceof D}`)
d.foo()
console.log('-')

console.log(`Test E:
Class: E extends A and C
Instance of E: ${e instanceof E}`)
e.foo()
console.log('-')
console.log(`Test F: 
Class: F extends B
Instance of F: ${f instanceof F}`)
f.foo()
console.log('-')
console.log(`Test G:
Class: G wrapped to use C alone with "new" decorator
Instance of G: ${g instanceof G}`)
g.foo()
console.log('-')

const isInstanceOfB = i => {
  try {
    return i instanceof B
  } catch (e) {
    return false
  }
}
console.log(`Test H:
Class: Anonymous class extends Object 
Instance of B: ${isInstanceOfB(h)}
Instance of Object: ${h instanceof Object}`)
h.foo()

This adds more readability, we can easily understand that we need a base class and on top of it we will add mixins using with.

This is my take on the problem. Instead of messing with prototypes, I "hoist"/"proxy" variables and functions up from the extended classes.

I do this by instantiating each base class in the constructor of the wrapping MultiClass (You can provide args for each class through super({"ClassName1":[args], "ClassName2":[args], ...})).

Then the code loops through each instantiated base class looking for properties to hoist. When it finds a function, it creates a mirror function to forward the return values. When it finds a variable, it creates getters and setters to access that variable.

Some interesting things with this method is that private variables won't get ruined like in other strategies. But because the base classes are running in their own scope, you can unfortunately get functions or variables with the same name running independently from each other. Name conflicts are overridden by the later class.

function MultiClass(...extendedClasses) {
    return class MultiClass {
        #baseClassMap = {};
        constructor(argMap) {
            // Loop through every base class
            extendedClasses.forEach(baseClass => {
                // Apply args to each base class based on argMap
                const baseClassArgs = argMap && argMap[baseClass.name];
                this.#baseClassMap[baseClass.name] = new baseClass(...baseClassArgs || []);

                // Gather every property until the Object constructor
                const properties = new Set();
                let obj = this.#baseClassMap[baseClass.name];
                while (obj.constructor !== Object) {
                    console.log(obj);
                    Object.getOwnPropertyNames(obj).forEach(propName => {
                        const propDescriptor = Object.getOwnPropertyDescriptor(obj, propName);
                        if (propDescriptor && (propDescriptor.configurable || typeof propDescriptor.configurable === "undefined") &&
                            (propDescriptor.writable || typeof propDescriptor.writable === "undefined")) {
                            properties.add(propName);
                            console.log(propName, propDescriptor);
                        }
                    });
                    obj = Object.getPrototypeOf(obj);
                }

                // Loop through every property
                properties.forEach(propName => {
                    // Hoist functions
                    if (typeof this.#baseClassMap[baseClass.name][propName] === "function" && propName !== "constructor") {
                        console.log("Setup function " + propName);
                        this[propName] = (...args) => this.#baseClassMap[baseClass.name][propName](...args);
                    }
                    // Hoist variables
                    else if (propName !== "constructor" && propName !== "length" && propName !== "prototype") {
                        console.log("Setup prop " + propName);
                        Object.defineProperty(this, propName, {
                            get: () => this.#baseClassMap[baseClass.name][propName],
                            set: (value) => this.#baseClassMap[baseClass.name][propName] = value
                        });
                    } else {
                        console.log("Skip prop " + propName);
                    }
                });
            });
        }
    }
}

Here's an example of usage:

class MyClass extends MultiClass(BaseClass1, BaseClass2, BaseClass3) {
    constructor() {
        // Optionally provide args to base class constructors
        super({
            "BaseClass1":[arg1, arg2],
            "BaseClass2":[arg1]
        });
    }
}

As shown in other answers, there is no real way to achieve multiple inheritance in JavaScript as of now. But like many other languages, multiple inheritance is more or less of a hack to achieve this.

For example, in python multiple inheritance is achieved by flattening inheritance into a chain of class layers.

Basically if you have:

class X(A, B):
    pass

You'll end up with a chain that looks like this:

X -> A -> B -> object

In Javascript, we can reproduce this by ensuring that classes are built on top of others.

In some other answer, they're trying to achieve something like this:

class X extends combine(A, B) {
}

The problem with this is that A and B classes are already built. So it's not possible to position one class over the other to create a chain.

For that we can use class expressions such as:

class Base {
  print() {
    console.log("base")
  }
}

A = (base) => class extends base {
  print() {
    super.print();
    console.log("IN A");
  }
};
B = (base) => class extends base {
  print() {
    super.print();
    console.log("IN B");
  }
};

Here we have 2 closure that can be passed a parent class to compose our class.

If we want to create a new type, we can simply do something like this.

N = A(B(Base))
M = B(A(Base))

So that covers how we can use expressions to build classes by passing our parent class to the next class being built. That's really the most important part to understand here.

Now let say we want to have something like this:

class Base {
}

class M1 {

  }

class M2 {
}

class A extends M1, Base {
}

class B extends M1, M2, Base {
}

In reality if we wanted to generate the class inheritance we'd have the following chain for A and B.

A = A -> M1 -> Base;
B = B -> M1 -> M2 -> Base;

So if we wanted to have multiple inheritance we'd need to have the following declarations instead.

Base = (base) => class {...}
M1 = (base) => class extends base {...}
M2 = (base) => class extends base {...}

And a function that looks like this:

function combine(...bases) {
    // reverse the order as the last base would be
    // the first that need to be created.
    bases.reverse() 
    let current_base = undefined;

    // for each base we create a composition of the current
    // with the previous one.
    for (let base of bases) {
        current_base = base(current_base)
    }

    return current_base
}

Then we can create a new class that combines the other using:

class X extends combine(M1, M2, Base) {
}

Obviously this can be extended by warping X into a constructor to be nested even more.

X = (base) => class extends combine(M1, M2, base) {...}

This way we can use combine to define the base class onto the X new class that we'd want to create.

Chong Lip Phang made a very helpful aggregation based on Sergio Carneiro's and Jon's implementation.

I want to make one tweak to Chong Lip Phang's work

When you call 'new mixin' make sure to pass the args (like this "new mixin(...args)") so that the necessary arguments are passed to the mixin's parent's (if any).

Updated code is below:

var aggregation = (baseClass, ...mixins) => {
    class base extends baseClass {
        constructor (...args) {
            super(...args);
            mixins.forEach((mixin) => {
                copyProps(this,(new mixin(...args))); // This line is the only change
            });
        }
    }
    let copyProps = (target, source) => {  // this function copies all properties and symbols, filtering out some special ones
        Object.getOwnPropertyNames(source)
              .concat(Object.getOwnPropertySymbols(source))
              .forEach((prop) => {
                 if (!prop.match(/^(?:constructor|prototype|arguments|caller|name|bind|call|apply|toString|length)$/))
                    Object.defineProperty(target, prop, Object.getOwnPropertyDescriptor(source, prop));
               })
    }
    mixins.forEach((mixin) => { // outside contructor() to allow aggregation(A,B,C).staticFunction() to be called etc.
        copyProps(base.prototype, mixin.prototype);
        copyProps(base, mixin);
    });
    return base;
}

according to this: https://en.wikipedia.org/wiki/Multiple_inheritance#:~:text=Multiple%20inheritance%20is%20a%20feature,one%20particular%20object%20or%20class.', classes can't be extended by multiple classes, but they can be extended multiple times.

Try this:

const classExtend = (Inherit: any) =>
class extends Inherit{}

const classExtend2 = (Inherit: any) =>
class extends Inherit{}

const classExtend3 = (Inherit: any) =>
class extends Inherit{}

class classExtendAll extends classExtend3(classExtend2(classExtend1())){}
//or classExtend1(classExtend2(classExtend3())){}
//or classExtend2(classExtend3(classExtend1())){}

Here's an awesome/really crappy way of extending multiple classes. I'm utilizing a couple functions that Babel put into my transpiled code. The function creates a new class that inherits class1, and class1 inherits class2, and so on. It has its issues, but a fun idea.

var _typeof = typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol' ? function (obj) {
  return typeof obj
} : function (obj) {
  return obj && typeof Symbol === 'function' && obj.constructor === Symbol ? 'symbol' : typeof obj
}

function _inherits (subClass, superClass) {
  if (typeof superClass !== 'function' && superClass !== null) {
    throw new TypeError('Super expression must either be null or a function, not ' + (
      typeof superClass === 'undefined' ? 'undefined' : _typeof(superClass)))
  }
  subClass.prototype = Object.create(
    superClass && superClass.prototype,
    {
      constructor: {
        value: subClass,
        enumerable: false,
        writable: true,
        configurable: true
      }
    })
  if (superClass) {
    Object.setPrototypeOf
    ? Object.setPrototypeOf(subClass, superClass)
    : subClass.__proto__ = superClass.__proto__  // eslint-disable-line no-proto
  }
}

function _m (...classes) {
  let NewSuperClass = function () {}
  let c1 = NewSuperClass
  for (let c of classes) {
    _inherits(c1, c)
    c1 = c
  }
  return NewSuperClass
}

import React from 'react'

/**
 * Adds `this.log()` to your component.
 * Log message will be prefixed with the name of the component and the time of the message.
 */
export default class LoggingComponent extends React.Component {
  log (...msgs) {
    if (__DEBUG__) {
      console.log(`[${(new Date()).toLocaleTimeString()}] [${this.constructor.name}]`, ...msgs)
    }
  }
}

export class MyBaseComponent extends _m(LoggingComponent, StupidComponent) {}

本文标签： javascriptES6 Class Multiple inheritanceStack Overflow