[JS Pattern] Mixin Pattern

Add functionality to objects or classes without inheritance

Although we can add functionality iwht mixins without inheritance, mixins themselves can use inheritance

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


const animalFunctionality = {
  walk: () => console.log("Walking"),
  sleep: () => console.log("Sleeping")
};

const dogFunctionality = {
  __proto__: animalFunctionality,
  bark: () => console.log("Woof!"),
  wagTail: () => console.log("Wagging my tail"),
  play: () => console.log("Plyaing!"),
  walk(){
    super.walk()
  },
  sleep(){
    super.sleep()
  }
};


// Object.assign(dogFunctionality, animalFunctionality);
Object.assign(Dog.prototype, dogFunctionality);

const pet1 = new Dog("Daisy");

console.log(pet1.name);
pet1.bark();
pet1.play();
pet1.walk();
pet1.sleep();

 

Suggestion:

Mixins were often used to add functionality to React component before the introduction of ES6 classes. The React team discourages the use of mixins as it easily adds uncessary complexity to a component, making it hard to maintain and reuse. The React eam encouraged the use of higher order components instead,  which can now often be replaced by Hooks.

 

[Note] From JS Patterns Book