Mixin Pattern

A mixin is an object that we can use in order to add reusable functionality to another object or class, without using inheritance. We can’t use mixins on their own: their sole purpose is to add functionality to objects or classes without inheritance.

Let’s say that for our application, we need to create multiple dogs. However, the basic dog that we create doesn’t have any properties but a name property.

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

A dog should be able to do more than just have a name. It should be able to bark, wag its tail, and play! Instead of adding this directly to the Dog, we can create a mixin that provides the bark, wagTail and play property for us.

const dogFunctionality = {
  bark: () => console.log("Woof!"),
  wagTail: () => console.log("Wagging my tail!"),
  play: () => console.log("Playing!"),
};

We can add the dogFunctionality mixin to the Dog prototype with the Object.assign method. This method lets us add properties to the target object: Dog.prototype in this case. Each new instance of Dog will have access to the the properties of dogFunctionality, as they’re added to the Dog’s prototype!

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

const dogFunctionality = {
  bark: () => console.log("Woof!"),
  wagTail: () => console.log("Wagging my tail!"),
  play: () => console.log("Playing!"),
};

Object.assign(Dog.prototype, dogFunctionality);

Let’s create our first pet, pet1, called Daisy. As we just added the dogFunctionality mixin to the Dog’s prototype, Daisy should be able to walk, wag her tail, and play!

const pet1 = new Dog("Daisy");

pet1.name; // Daisy
pet1.bark(); // Woof!
pet1.play(); // Playing!

Perfect! Mixins make it easy for us to add custom functionality to classes or objects without using inheritance.

Although we can add functionality with mixins without inheritance, mixins themselves can use inheritance!

Most mammals (besides dolphins.. and maybe some more) can walk and sleep as well. A dog is a mammal, and should be able to walk and sleep!

Let’s create a animalFunctionality mixin that adds the walk and sleep properties.

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

We can add these properties to the dogFunctionality prototype, using Object.assign. In this case, the target object is dogFunctionality.

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

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

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

Perfect! Any new instance of Dog can now access the walk and sleep methods as well.

1class Dog {
2  constructor(name) {
3    this.name = name;
4  }
5}
6
7const animalFunctionality = {
8  walk: () => console.log("Walking!"),
9  sleep: () => console.log("Sleeping!")
10};
11
12const dogFunctionality = {
13  __proto__: animalFunctionality,
14  bark: () => console.log("Woof!"),
15  wagTail: () => console.log("Wagging my tail!"),
16  play: () => console.log("Playing!"),
17  walk() {
18    super.walk();
19  },
20  sleep() {
21    super.sleep();
22  }
23};
24
25Object.assign(Dog.prototype, dogFunctionality);
26
27const pet1 = new Dog("Daisy");
28
29console.log(pet1.name);
30pet1.bark();
31pet1.play();
32pet1.walk();
33pet1.sleep();

An example of a mixin in the real world is visible on the Window interface in a browser environment. The Window object implements many of its properties from the WindowOrWorkerGlobalScope and WindowEventHandlers mixins, which allow us to have access to properties such as setTimeout and setInterval, indexedDB, and isSecureContext.

Since it’s a mixin, thus is only used to add functionality to objects, you won’t be able to create objects of type WindowOrWorkerGlobalScope.

1window.indexedDB.open("toDoList");
2
3window.addEventListener("beforeunload", event => {
4  event.preventDefault();
5  event.returnValue = "";
6});
7
8window.onbeforeunload = function() {
9  console.log("Unloading!");
10};
11
12console.log(
13  "From WindowEventHandlers mixin: onbeforeunload",
14  window.onbeforeunload
15);
16
17console.log(
18  "From WindowOrWorkerGlobalScope mixin: isSecureContext",
19  window.isSecureContext
20);
21
22console.log(
23  "WindowEventHandlers itself is undefined",
24  window.WindowEventHandlers
25);
26
27console.log(
28  "WindowOrWorkerGlobalScope itself is undefined",
29  window.WindowOrWorkerGlobalScope
30);

React (pre ES6)

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

Mixins allow us to easily add functionality to objects without inheritance by injecting functionality into an object’s prototype. Modifying an object’s prototype is seen as bad practice, as it can lead to prototype pollution and a level of uncertainty regarding the origin of our functions.

References

• Functional Mixins- Eric Elliott
• Mixins - JavaScript Info