Photo by Alexey Ruban on Unsplash

Introduction

In inheritance, the most programming language does not support multi-level inheritance which means you cannot have more than one parent for a particular class. Javascript also does not support multi-level inheritance, as a result, there are some blockers when arranging your code base.

For example, let's say we have a Man class and its parent is Person now there is a defined relationship between but what if you have a utility class Authorize that is neither related to Person or Man classes so what will be a better approach to use Authorize class for Man class?

There are plenty ways to solve the problem

• Dependency Injection
• Creating a separate utility and pass value in methods
• Creating Man instance from Authorize class

We will be working with approach three in this article where we will be using mixin as a virtual relationship between all three classes

What is a Mixin?

Mixin is a higher-level function or class declaration that has internal methods and properties that can be abstracted to any children object either class or object

Creating a Mixin in JavaScript

There are 2 ways you can create a mixin:

1. Object declaration

2. Class declaration

1. Object declaration

We can create an object with methods and properties and use it to update the prototype of any existing class to attach the

Object-based mixin

We have created a mixin that will manage the authorization and attach that to the person class on its prototype and it can be accessed from the person instance

2. Class declaration

To create a class mixin, we will need to make a parent class for any child-level class, in our example we will need to create Person and Man classes both and extend Man from the virtual Person class

class-based mixin

This type of declaration is helpful when you have an inheritance in the picture and can add properties as class own

Difference between both the mixin

The major difference between both mixins is when and where they will be used. Object-based mixins are a better option when you can a few common method and you wanted to attach that into any existing class

On the other hand, class-based mixins are good when you just creating a child class from any abstract class

Conclusion

Mixins can be good for helper methods and not for actual instance methods and if your application has an instance method then I will advise not to create mixin but classes.

You can find the source code here. Happy coding!

Go composable: Build apps faster like Lego

Bit is an open-source tool for building apps in a modular and collaborative way. Go composable to ship faster, more consistently, and easily scale.

→ Learn more

Build apps, pages, user-experiences and UIs as standalone components. Use them to compose new apps and experiences faster. Bring any framework and tool into your workflow. Share, reuse, and collaborate to build together.

Help your team with:

→ Micro-Frontends

→ Design Systems

→ Code-Sharing and reuse

→ Monorepos