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:
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