#5 Design Patterns — Mixin Pattern

Hello Everyone, Welcome to my blog 🙏. I hope you are all safe and that this blog finds you in good health ❤️.

In my previous blogs, we have learnt about

1. What are design patterns and What is Observer Pattern?

2. What is the Constructor Pattern?

3. What is the Prototype Pattern?

4. What is the Decorator Pattern?

In this blog, we will learn more about

👉 Mixin Pattern

Mixin Pattern

In my previous blogs, we came across the Decorator pattern that is used for adding new properties to the individual objects similar to it, Mixin pattern helps to borrow functionalities from other objects. In simple words, It help objects to use existing functionalities without code duplicate and inheritance.

How do Mixin Pattern works?

To understand it better, let us take an example

We know that all living beings have something in common. Animals can walk, eat, sleep, etc. Humans can also do the same but, we also think.

Now, let's see how the mixin pattern helps us to achieve this with minimal code.

Functional-based

const commonActions = {
  walk: function () {
    console.log(`${this.name} can walk`)    
  },
  eat: function () {
    console.log(`${this.name} can eat`)  
  },
  sleep: function () {
    console.log(`${this.name} can sleep`)
  }
}

function CreateHumans(name) {
  this.name = name;
  this.think = function () {
    console.log(`${this.name} can think`)
  }
}

function CreateAnimals(name) {
  this.name = name;
}

CreateHumans.prototype = {...CreateHumans.prototype, ...commonActions}
CreateAnimals.prototype = {...CreateAnimals.prototype, ...commonActions}

const human1 = new CreateHumans("Man");
const animal1 = new CreateAnimals("Dog");

human1.walk()  // "Man can walk"
animal1.walk() // "Dog can walk"
human1.think() // "Man can think"
animal1.think() // animal1.think is not a function

As you have noticed we get type error if animal1 tried to access think method which clearly states think method is only applicable for human1. Thus, common actions are shared and used by objects that leverage code reusability here.

The same goes for class based approach.

Class based

const commonActions = {
  walk: function () {
    console.log(`${this.name} can walk`)    
  },
  eat: function () {
    console.log(`${this.name} can eat`)  
  },
  sleep: function () {
    console.log(`${this.name} can sleep`)
  }
}

class CreateHumans {
  constructor(name) {
     this.name = name;
  }
  think() {
    console.log(`${this.name} can think`)
  }
}

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

Object.assign(CreateHumans.prototype, commonActions)
Object.assign(CreateAnimals.prototype, commonActions)

const human1 = new CreateHumans("Man");
const animal1 = new CreateAnimals("Dog");

human1.walk()  // "Man can walk"
animal1.walk() // "Dog can walk"
human1.think() // "Man can think"
animal1.think() // animal1.think is not a function;

Superb!!! We have seen how the Mixin pattern works.

When to use the Mixin pattern?

By definition, it is pretty clear that the Mixin pattern is used to eliminate code duplicates and leverage Code reusability. For a language like Javascript, which doesn’t support multiple-inheritance, the Mixin pattern definitely comes in very handy in this situation.

for example:- We have animals that live on land and in water and there are few species that can live both on land and in water. So, these species are called Amphibians and they borrow both properties. This scenario is not possible through Inheritance in Javascript so, we use Mixin to achieve this scenario.

--------------------------------------------------------------------------------------------------------

Here we go, That’s it folks for this blog.

Hope everyone liked it. If you like it, give it a love ❤️ , and share it with your friend.

For more exciting content on Frontend,

Please do follow me 🎯.

Thanks a lot, Everyone 🙏. Until Next time, Happy Learning ✍️

Abhishek Kovuri, UI developer

#TWBloggersClub