Skip to main content

JavaScript Class Mixin (Live Playground)

JavaScript doesn't support multiple inheritance directly in classes, but you can use mixins to achieve similar functionality. Mixins allow you to combine multiple objects into one class, sharing functionality among them. In this tutorial, we'll learn how to use mixins in JavaScript for multiple inheritance.

Creating a Mixin​

A mixin is a function that takes a class as its argument and returns a new class that extends the given class with additional methods:

function FlyMixin(Base) {
  return class extends Base {
    fly() {
      console.log('I can fly!');
    }
  };
}

In this example, we've created a mixin called FlyMixin that adds a fly method to the given class.

Applying a Mixin to a Class​

To apply a mixin to a class, pass the class as an argument to the mixin function:

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`My name is ${this.name}`);
  }
}

const FlyingAnimal = FlyMixin(Animal);

const bird = new FlyingAnimal('Bird');
bird.speak(); // Output: My name is Bird
bird.fly(); // Output: I can fly!

In this example, we apply the FlyMixin to the Animal class, creating a new class FlyingAnimal. The FlyingAnimal class has both the speak method from the Animal class and the fly method from the mixin.

Using Multiple Mixins​

You can apply multiple mixins to a class by chaining mixin functions:

function SwimMixin(Base) {
  return class extends Base {
    swim() {
      console.log('I can swim!');
    }
  };
}

const FlyingSwimmingAnimal = SwimMixin(FlyMixin(Animal));

const duck = new FlyingSwimmingAnimal('Duck');
duck.speak(); // Output: My name is Duck
duck.fly(); // Output: I can fly!
duck.swim(); // Output: I can swim!

In this example, we apply both FlyMixin and SwimMixin to the Animal class, creating a new class FlyingSwimmingAnimal. The FlyingSwimmingAnimal class has methods from both mixins, as well as the Animal class.

Live Playground, Try it Yourself

Conclusion​

In this tutorial, we learned how to use mixins in JavaScript for multiple inheritance. Mixins allow you to combine multiple objects into one class, sharing functionality among them. By using mixins, you can create more flexible and reusable code, especially when you need to share functionality among multiple classes without using traditional inheritance.