Review the example provided below, where the super method behaves as anticipated. Through some clever techniques, even the instanceof function works effectively (for the most part):

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

// Incorporating B mixin, requiring a wrapper for use
const B = (B) => class extends B {
  foo() {
    if (super.foo) super.foo(); // safeguarding against mixins not recognizing who is super
    console.log(`from B -> inside instance of B: ${this instanceof B}`);
  }
};

// Integrating C mixin, needing a wrapper for application
const C = (C) => class extends C {
  foo() {
    if (super.foo) super.foo(); // ensuring mixins handle not having the method
    console.log(`from C -> inside instance of C: ${this instanceof C}`);
  }
};

// D class, extending A, B and C, maintaining 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, extending A and C
class E extends C(A) {
  foo() {
    super.foo();
    console.log(`from E -> inside instance of E: ${this instanceof E}`);
  }
}

// F class, only extending B
class F extends B(Object) {
  foo() {
    super.foo();
    console.log(`from F -> inside instance of F: ${this instanceof F}`);
  }
}
// G class, wrapping C to be used with new decorator, presenting in a neat format
class G extends C(Object) {}

const inst1 = new D(),
      inst2 = new E(),
      inst3 = new F(),
      inst4 = new G(),
      inst5 = new (B(Object)); // instance utilizing only B, in an unattractive 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: wrapper for using C alone with "new" decorator, displaying nicely -> outside instance of G: ${inst4 instanceof G}`);
inst4.foo();
console.log('-');
console.log(`Test B alone, unappealing format "new (B(Object))" -> outside instance of B: ${inst5 instanceof B}, this one does not succeed`);
inst5.foo();

The output will be:

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: wrapper for using C alone with "new" decorator, displaying nicely -> outside instance of G: true
from C -> inside instance of C: true
-
Test B alone, unappealing format "new (B(Object))" -> outside instance of B: false, this one does not succeed
from B -> inside instance of B: true

Link for experimentation

My solution involves condensing the code for better efficiency:

    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(`wax is ${grossMan.wax}!`);
    grossMan.pick(); // eww!
    grossMan.dig();  // yuck!

Justin Fagnani, in my opinion, presents a clever approach to combining multiple classes into one by utilizing the ability of ES2015 to create classes using class expressions.

Distinguishing Expressions from Declarations

Similar to how you can define a function with an expression:

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

You can also do the same with classes:

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

An expression is evaluated at runtime when the code is executed, whereas a declaration is processed beforehand.

Utilizing Class Expressions for Mixins

This technique allows you to generate a class dynamically only when the function is called:

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

The interesting aspect is that you can prepare the entire class structure beforehand and determine which class it should extend when invoking the function:

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

To combine multiple classes due to ES6 supporting single inheritance, you must construct a series of classes encompassing all the desired classes. For instance, if you wish to create a class C extending both A and B:

class A {}
class B extends A {}
class C extends B {}  

The drawback is its rigidity. If later on, you decide to have a class D extending B but not A, complications arise.

However, through clever manipulation leveraging class expressions, this issue can be resolved by establishing A and B not directly as classes but as class factories (utilizing arrow functions for conciseness):

class Base {} 
var A = (superclass) => class A extends superclass
var B = (superclass) => class B extends superclass
var C = B(A(Base))
var D = B(Base)

Observe how the inclusion of classes in the hierarchy is determined at the last minute.

I've developed a library based on these concepts which you can explore: mics

Check out Sergio Carneiro's and Jon's implementation which involves defining an initializer function for almost all classes except one. I have made some modifications to the aggregation function, utilizing default parameters in constructors instead. Additionally, I have included some comments.

var aggregation = (baseClass, ...mixins) => {
    class base extends baseClass {
        constructor (...args) {
            super(...args);
            mixins.forEach((mixin) => {
                copyProps(this,(new mixin));
            });
        }
    }
    let copyProps = (target, source) => {  // a function that copies 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) => { 
        copyProps(base.prototype, mixin.prototype);
        copyProps(base, mixin);
    });
    return base;
}

Here is a quick 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 method will prioritize properties and methods of classes listed later in the sequence.

Understanding inherited properties in JavaScript can be tricky due to the nature of prototypical inheritance. Let's explore how it works:

var parent = {a: function() { console.log('ay'); }};
var child = Object.create(parent);
child.a() // Check child instance, then move up to its prototype (parent) to find the method

Now, let's see what happens if you try to access a property that doesn't exist:

child.b; // Search through child instance, prototype (parent), Object.prototype, and finally null before returning undefined

To achieve similar functionality with mixins, you can use methods like mixins, but keep in mind late binding won't be possible:

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

Comparing this approach with direct prototypical inheritance:

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

According to information found on the website es6-features.org/#ClassInheritanceFromExpressions, a method for implementing multiple inheritance through an aggregation function is presented:

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
}

However, similar functionality can be found in existing libraries such as aggregation.

Here is the solution I have come up with:

'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 clever ES6 approach proved to be successful:

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())

Displayed results on the browser console:

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

I dedicated several days to unraveling this concept on my own and documented my findings in a detailed article, which can be found at https://github.com/latitov/OOP_MI_Ct_oPlus_in_JS. I hope that it can provide assistance to those of you grappling with the same issue.

To summarize, here is an illustration of how Multiple Inheritance (MI) can be carried out in JavaScript:

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

    class Asset {
        constructor(price) {
            this.price = price;
        }
        show() {
            return 'its approximated value 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();

Furthermore, presented below is the concise specialize_with() function:

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

I encourage you to delve into the details provided in https://github.com/latitov/OOP_MI_Ct_oPlus_in_JS.

Implement Mixins in ES6 for achieving multiple inheritance.

let mixinClass = Base => class extends Base{
    // Insert mixinClass code here
};

class DerivedClass extends mixinClass(BaseClass) {
    constructor() {
    }
}

Utilizing Object.assign allows for a similar approach to composition with ES6 classes.

class Animal {
    constructor(){ 
     Object.assign(this, new Shark()) 
     Object.assign(this, new Clock()) 
  }
}

class Shark {
  // Only properties defined in the constructor will be on the object.
  constructor(){ this.color = "black"; this.bite = this.bite }
  bite(){ console.log("bite") }
  eat(){ console.log('eat') }
}

class Clock{
  constructor(){ this.tick = this.tick; }
  tick(){ console.log("tick"); }
}

let animal = new Animal();
animal.bite();
console.log(animal.color);
animal.tick();

This technique is not widely recognized but proves to be quite practical. Although you could use function shark(){} instead of a class, there are benefits to utilizing classes.

In terms of inheritance, using the extend keyword differs in that functions don't just exist on the prototype but also directly on the object itself.

Therefore, when creating a new instance with new Shark(), the resulting object has both a bite method and an eat method directly available.

There isn't a straightforward method for implementing multiple class inheritance. I prefer to use a combination of association and inheritance to achieve the desired functionality.

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

I hope you find this helpful.

After going through this discussion, I decided to share my approach which I personally found to be the most user-friendly.

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

To implement this solution, you can follow this pattern:

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

When working with inheritance in JavaScript, you may come across a limitation where you can't assign multiple prototype objects to a single class (constructor function). However, there is a workaround that involves aggregating and merging the properties of different prototype objects manually within your class. By refactoring the parent classes and extending the new combined class, you can effectively incorporate multiple inheritances into one target class. Here's a snippet of code to help you achieve this:

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 method described below (class cloning by copying the instance fields and prototype properties) is effective for my needs. I am utilizing standard JS (not Typescript), with JsDoc annotations, and VSCode for compile-time type validation.

The process of implementing this solution is straightforward:

class DerivedBase extends cloneClass(Derived, Base) {}

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

let o = new DerivedBase()  

The classes can be created in a similar manner to regular ES6 classes.

However, some additional steps need to be taken:

• Instead of using the built-in operator 'instanceof', utilize the function isInstanceOf().
• When calling non-constructor members of the base class using 'super', employ the function super2() instead.
• Avoid writing code directly within constructors; opt to place it in a class method named 'init()' which is then invoked by the constructor. Refer to the example provided below.

/* Copy and paste the entire script into your browser's developer console */
/* Tested on Chrome, Microsoft Edge, and Firefox (Windows OS) */
/* Compatibility with JSDoc in VSCode */
/* Not validated with minified or obfuscated code */

// The library functions and helper utilities are included in the section above...

//#region testData
// Sample test data and class definitions are listed here...

Please note that while the JSDoc intersection operator & may not always be reliable, alternative solutions can be explored. For instance, defining a separate interface class that manually combines the two classes could be considered. This interface class could extend one of the classes, with the other class's interface being automatically implemented using the quick fix option in VSCode.

My aim in writing this code is to gain a deeper understanding of JavaScript programming and to introduce more flexibility into my coding practices. The code presented here is based on the code provided 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

I have also added a second alternative way to demonstrate extending classes in JavaScript:

   

 //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();

Using composition instead of inheritance is highly recommended for its flexibility and ability to reuse code across different classes.

import Manager from 'your-preferred-library';

class Sample extends MixinClassTwo(MixinClassOne(Manager)) {
  constructor() {
  }
}

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

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

To delve deeper into this concept, explore: "Composition over inheritance"

A new tool has been developed to enable fake multi inheritance in es6 by creating a custom library. This library utilizes code preprocessing techniques and mixins to simulate the behavior of multiple class inheritance, which differs significantly from traditional native multiple inheritance.

JavaScript mixins are designed to facilitate code reuse among various classes without establishing a formal inheritance hierarchy. Unlike multiple inheritance, where a class can inherit from multiple superclasses, mixins offer a more flexible approach for sharing methods across different classes without introducing complex class hierarchies.

While some object-oriented programming languages support multiple inheritance, JavaScript deliberately avoids this feature to simplify code structure and prevent issues like the diamond problem. Despite this limitation, mixins in JavaScript provide a similar functionality as multiple inheritance while avoiding associated complexities.

By implementing mixins, developers can efficiently share and reuse code in JavaScript projects, enhancing flexibility without compromising code integrity. Check out the following examples:

// Example 1

class a{
    methodA() {
        console.log( "Say, Hi" )
    }
}

class b{
    pleaseCallAMethodOfA() {
        this.methodA();
    }
}

class c extends a, b{

}

var instanceC = new c();
instanceC.pleaseCallAMethodOfA();

Or try out this additional example:

// Example 2

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

The flexibility provided by mixins allows for extending any number of classes beyond just two. For access to the library code, visit:

implement a custom function that uses extent to manage multiple inheritance in 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)

During this project, I developed a unique function that showcases some innovative concepts. The function takes a list of classes and merges them into a new class, with the last prototype taking precedence to avoid conflicts. A major challenge was determining what the constructor should do when creating a composed object. While copying methods to a prototype was straightforward, defining the logic of the newly composed object was more complex. Should it have its own constructor or be constructorless? Unlike Python, where the constructor is matched accordingly, JavaScript functions are more versatile, allowing a variety of inputs without clear signatures.

Although not optimized, the main goal was to explore different possibilities. Using `instanceof` may lead to unexpected behavior, which can be disappointing for developers used to a class-oriented approach.

Perhaps JavaScript lacks certain features that would make these tasks easier.

/*
    (c) Jon Krazov 2019

    Below is an experiment pushing the limits of JavaScript.
    It enables the creation of one class from multiple classes.

    Usage 1: Without custom constructor

    If no constructor is provided, each individual class constructor will react
    based on the parameters passed in the object. In case of missing parameters,
    constructors will be called without any additional arguments.

    Example:

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

    Usage 2: With custom constructor

    If a constructor is specified in the options object (second parameter), it will
    override constructors of all classes.

    Example:

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

// Main 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) =>
            Object.getOwnPropertyNames(currentClass.prototype)
                .reduce(
                    (result, propName) =>
                        noConstructor(propName)
                            ? Object.assign(
                                    result,
                                    { [propName]: currentClass.prototype[propName] }
                                )
                            : result,
                    {}
                ),
        {}
    );

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

// Demo Section

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

This content was originally shared here on GitHub Gist.

I have developed a unique approach to programming complex multi-inheritance scenarios:

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 innovative method streamlines the code while providing flexibility for customizing properties, such as the catchTime in robotDogProto.

Solution

In the realm of Javascript, it is considered impossible for an object to have more than one prototype.

Alternative Approach

An option that can be explored is utilizing Object.assign. However, it should be noted that this method may lack in safety measures and does not offer autocomplete or type safety features.

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

Another Perspective to Consider

If the intention is to streamline the process of constructing the Example class with access to methods from multiple classes, another suggestion could be creating a separate BaseClass for reusability purposes.

Note: For scenarios where methods rely on those from the super-class, it is advisable to establish a BaseClass and extend it by defining classes like

class Class1 extends BaseClass {}

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

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

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

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

Recently, I encountered a familiar issue. To address it, I devised a set of model-esque classes and aimed to create several interface-style classes for expanding my models - such as HasGuid or HasName. However, I soon discovered that JS classes do not support multiple inheritance. Below is the solution I formulated, which also includes copying default values. This method could potentially be utilized to synchronize two objects after they have been populated with some values.

The only drawback is that you must provide an instance rather than 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!

Deriving from Multiple entails two creative workarounds:

• Collecting mixins into a foundational class
• Enclosing an extended base class within a mixin function

Collecting mixins into a foundational class

There are numerous implementations available, but here is one approach I found effective:

const aggregator = (base, ...mixins) => {
  const exclusionList = /^(?:constructor|prototype|arguments|caller|name|bind|call|apply|toString|length)$/
  const duplicateAttributes = (target, source) => {
    Object.getOwnPropertyNames(source)
      .concat(Object.getOwnPropertySymbols(source))
      .forEach(prop => {
        if (prop.match(exclusionList)) 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
        duplicateAttributes(target.prototype, mixin.prototype)
        duplicateAttributes(target, mixin)
      }
    }
  }
}

The concept is straightforward - it produces and returns an extended class based on a base class. Within this extended class, attributes and functions from each mixin are copied.

Below is a functional snippet with some illustrative tests.

// Code snippet for test cases can be inserted here 

An issue with this implementation is that it solely extends the base class. This aspect becomes more apparent in the Test J:

Enclosing an extended base class within a mixin function

A direct solution involves using a mixin function wrapper. However, every method comes with its own trade-offs. The downside of this method is having to modify certain classes as mixin function wrappers. Let's utilize the previous code snippet for demonstration purposes.

We will convert classes B and C into mixin wrappers like so:

// 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 them into a regular class as shown below:

// 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}`)
  }
}

Provided is a working example alongside some tests:

// Code snippet for test cases can be added here 

Test D clearly indicates the extension of class D from 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

Additionally, in Test H, H does not extend B because it is a mixin that extends another class.

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

For improved syntax, a builder can be incorporated like this:

const extender = base => new MixinBuilder(base)

// Our helper class for enhanced readability
class MixinBuilder {
  constructor(base) {
    this.base = base;
  }
  with(...mixins) {
    return mixins.reduce((c, mixin) => mixin(c), this.base);
  }
}

// Code snippet for test cases can be included here 

This addition enhances readability by illustrating the need for a base class with mixins added on top using with.

In tackling the issue at hand, my approach differs by avoiding manipulation of prototypes. Instead, I elevate ("hoist"/"proxy") variables and functions from the extended classes.

This is achieved by creating instances of each base class within the MultiClass wrapper constructor (Arguments for each class can be provided through

super({"ClassName1":[args], "ClassName2":[args], ...})

The process entails traversing through each instantiated base class to identify properties that need to be elevated. Functions are replicated as mirror functions to pass on return values, while variables have getters and setters created for direct access.

An intriguing aspect of this method is the protection of private variables, unlike in other techniques. Nonetheless, due to the independent scopes of the base classes, conflicts may arise when functions or variables share the same name, with later classes taking precedence over earlier ones.

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 illustrating how to use it:

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

As demonstrated in prior responses, achieving multiple inheritance in JavaScript is not straightforward at the moment. However, similar to other programming languages, multiple inheritance can be somewhat achieved through clever workarounds.

For instance, in Python, multiple inheritance involves flattening inheritance into a hierarchy of class layers.

Essentially, if you have:

class X(A, B):
    pass

You will end up with a sequence like this:

X -> A -> B -> object

In JavaScript, we can mimic this by ensuring that classes are constructed on top of one another.

In a different context, attempts were made to replicate something like this:

class X extends combine(A, B) {
}

The issue here lies in the fact that both classes A and B already exist. Therefore, stacking one class over the other to form a chain becomes unattainable.

To overcome this obstacle, we can utilize 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 two closures that accept a parent class input to construct our class effectively.

If we wish to create a new type, we could simply execute something along these lines:

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

This illustrates how we can use expressions to build classes by passing the parent class to the subsequent class under construction - an essential concept to grasp here.

Now, let's say we aim for a structure like this:

class Base {
}

class M1 {

}

class M2 {
}

class A extends M1, Base {
}

class B extends M1, M2, Base {
}

In practice, for A and B to inherit correctly, the following chains would be necessary:

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

Hence, to achieve multiple inheritance, the declarations need to be adjusted accordingly:

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

Additionally, a function like this would come in handy:

function combine(...bases) {
    bases.reverse()
    let current_base = undefined;

    for (let base of bases) {
        current_base = base(current_base)
    }

    return current_base
}

Subsequently, we can form a new class combining the others using:

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

Moreover, extending this further by embedding X within a constructor permits even greater nesting:

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

By employing combine, the base class can be defined onto the newly-created X class as desired.

A comprehensive compilation was created by Chong Lip Phang based on the work of Sergio Carneiro and Jon.

I have a small adjustment to suggest for Chong Lip Phang's contribution

When utilizing 'new mixin', be sure to pass the arguments (as in "new mixin(...args)") to ensure that the necessary arguments reach the mixin's parent (if applicable).

The revised code can be found below:

var aggregation = (baseClass, ...mixins) => {
    class base extends baseClass {
        constructor (...args) {
            super(...args);
            mixins.forEach((mixin) => {
                copyProps(this,(new mixin(...args))); // This line has been updated
            });
        }
    }
    let copyProps = (target, source) => {  // this function copies all properties and symbols while filtering out certain 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) => { // defined outside contructor() to support calling aggregation(A,B,C).staticFunction(), etc.
        copyProps(base.prototype, mixin.prototype);
        copyProps(base, mixin);
    });
    return base;
}

I found a solution on Stack Overflow (https://stackoverflow.com/a/61860802/) and adapted it into TypeScript successfully. Special thanks to @toddmo for the original code!)

type BaseClass = new () => void;

/**
 * Allows JavaScript class to extend multiple classes.
 */
export function Classes(baseClasses: BaseClass[]) {
  class Bases {
    constructor() {
      for (const baseClass of baseClasses) {
        Object.assign(this, new baseClass());
      }
    }
  }

  for (const base of baseClasses) {
    const properties = Object.getOwnPropertyNames(base.prototype).filter(
      (property) => property !== "constructor"
    );

    for (const property of properties) {
      // @ts-ignore
      Bases.prototype[property] = base.prototype[property];
    }
  }

  return Bases;
}

To use this functionality, simply do:

export class Example extends Classes([
  ClassOne,
  ClassTwo,
]) {}