Skip to content

Multiple inheritances in JavaScript

  • by

There are no Multiple inheritances in JavaScript. In JavaScript every object has a single associated prototype, it cannot dynamically inherit from more than one prototype chain.

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.

Multiple inheritances in JavaScript

Simple example code creating a new prototype with the methods of two other prototypes.

<!DOCTYPE html>
<html>
<body>
  <script>
    var Animal = function() {
      this.className = 'Animal';
      this.vector = {x: 0, y: 0};
    }
    var Flying_object = function() {
      this.className = 'Flying_object';
      this.value = 'some value';
    }

    function mix(classA, classB) {
      var instanceA = new classA(),
      instanceB = new classB();
      for (var prop in instanceA) {
        instanceB[prop] = instanceA[prop];
      }
      return instanceB;
    }

    var Bird = function() { this.className = 'Bird'; };
    Bird.prototype = mix(Animal, Flying_object);
    var instance = new Bird();

    console.log(instance);
    console.log(instance.className);
    console.log(instance.value);
  </script>

</body>
</html> 

Output:

Multiple inheritances in JavaScript

Source: stackoverflow.com

Using Mixins:

Mixins are a way to compose classes or objects from multiple sources. You can create separate objects with specific functionalities and then combine them into a new object. Here’s a simple example:

// Define mixins
const canSwim = {
  swim() {
    console.log('Swimming...');
  }
};

const canFly = {
  fly() {
    console.log('Flying...');
  }
};

// Create a new object by combining mixins
const duck = Object.assign({}, canSwim, canFly);

// Use the new object
duck.swim(); // Output: Swimming...
duck.fly();  // Output: Flying...

Using Prototype Chain:

You can manually set up a prototype chain to achieve multiple inheritance. Here’s an example:

// Parent constructor 1
function Animal(name) {
  this.name = name;
}

// Parent constructor 2
function Bird(name) {
  Animal.call(this, name);
}

// Child constructor inheriting from Animal and Bird
function Duck(name) {
  Animal.call(this, name);
  Bird.call(this, name);
}

// Set up the prototype chain
Bird.prototype = Object.create(Animal.prototype);
Duck.prototype = Object.create(Bird.prototype);

// Extend Duck prototype with additional methods
Duck.prototype.swim = function() {
  console.log('Swimming...');
};

Duck.prototype.fly = function() {
  console.log('Flying...');
};

// Create a Duck instance
const myDuck = new Duck('Donald');

// Use methods from both Animal and Bird
myDuck.swim(); // Output: Swimming...
myDuck.fly();  // Output: Flying...

In this example, Duck inherits from both Animal and Bird using the prototype chain. You can add specific methods to the Duck prototype to extend its functionality.

Note: Manually managing prototype chains can become complex, and using mixins or other composition patterns may be more readable and maintainable in some cases. Additionally, ECMAScript 6 (ES6) introduced the class syntax which simplifies the process of creating and extending classes in JavaScript.

Do comment if you have any doubts or suggestions on this JS inheritance topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading