User Tools

Site Tools


java-script:multiple-inheritance

Java Script Multiple Inheritance

JavaScript does not support multiple inheritance directly, which means a class can't extend more than one class. The extends keyword can only be followed by a single class.
To incorporate functionality from multiple sources, JavaScript supports “mixins” as a way to accomplish this.

Java Script Mixins

Mixins using class syntax

A mixin is a class whose methods are intended to be added to (or “mixed in” to) other classes.
AnimalMixin is a function that takes a base class and returns a new class that extends the base class and adds the eats method.
Then Employee extends AnimalMixin(Person) - effectively combining Person and Animal.
Also, note that super refers to the parent class, so calling super.description() in Employee will call description on Person, not Animal.

Example:

Person.js
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
 
    description() {
        return `A person named ${this.name} who is ${this.age} years old`;
    }
}
 
const AnimalMixin = Base => class extends Base {
    eats() {
        return `${this.name} eats like an animal.`;
    }
};
 
class Employee extends AnimalMixin(Person) {
    constructor(name, age, salary, jobTitle) {
        super(name, age);
        this.salary = salary;
        this.jobTitle = jobTitle;
    }
 
    description() {
        return `An employee is also ${super.description()}`;
    }
}
 
let employee = new Employee("Aurel", 30, 15000, "CEO boss");
console.log(employee.eats()); // Aurel eats.
console.log(employee.description()); // An employee is also A person named Aurel who is 30 years old
While mixins can be useful for sharing behavior between classes, they should be used sparingly as they can make code more complex and harder to follow.

Mixins using Object.assign

Same functionality can be achieved using Object.assign approach.
In this case, we're directly adding the methods from AnimalMixin to the prototype of Employee class using Object.assign(). This way, all instances of Employee will have access to the eats method.

Person.js
let AnimalMixin = {
    eats() {
        return `${this.name} eats.`;
    }
};
 
class Employee {
    constructor(name, age, salary, jobTitle) {
        this.name = name;
        this.age = age;
        this.salary = salary;
        this.jobTitle = jobTitle;
    }
 
    description() {
        return `A person named ${this.name} who is ${this.age} years old`;
    }
}
 
Object.assign(Employee.prototype, AnimalMixin);
 
let employee = new Employee("Aurel", 30, 15000, "CEO boss");
console.log(employee.eats()); // Aurel eats.
Using class syntax can be more straightforward if you're already working with classes and want to take advantage of built-in class features like super calls and static properties/methods.
On the other hand, Object.assign() can be more flexible and dynamic, since it allows you to copy methods onto any object, not just class prototypes.
java-script/multiple-inheritance.txt · Last modified: 2023/07/26 19:39 by odefta