[JS Pattern] Mixin Pattern

本文主要是介绍[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

这篇关于[JS Pattern] Mixin Pattern的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！