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
property.
When to Use
- Use this when you need to add reusable functionality to multiple classes without creating an inheritance chain
- This is helpful when you want to compose behavior from multiple sources
Instructions
- Use to add mixin properties to a class prototype
- Be cautious with prototype pollution — modifying prototypes can lead to unexpected behavior
- In React, prefer Hooks over mixins (mixins are discouraged by the React team)
- Consider composition over inheritance when designing reusable behavior
Details
js
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
, we can create a mixin that provides the
,
and
property for us.
js
const dogFunctionality = {
bark: () => console.log("Woof!"),
wagTail: () => console.log("Wagging my tail!"),
play: () => console.log("Playing!"),
};
We can add the
mixin to the
prototype with the
method. This method lets us add properties to the
target object:
in this case. Each new instance of
will have access to the properties of
, as they're added to the
's prototype!
js
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,
, called Daisy. As we just added the
mixin to the
's prototype, Daisy should be able to walk, wag her tail, and play!
js
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 can walk and sleep as well. A dog is a mammal, and should be able to walk and sleep!
Let's create a
mixin that adds the
and
properties.
js
const animalFunctionality = {
walk: () => console.log("Walking!"),
sleep: () => console.log("Sleeping!"),
};
We can add these properties to the
prototype, using
. In this case, the target object is
.
js
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
can now access the
and
methods as well.
An example of a mixin in the real world is visible on the
interface in a browser environment. The
object implements many of its properties from the
WindowOrWorkerGlobalScope
and
mixins, which allow us to have access to properties such as
and
,
, and
.
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
.
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.
Source
References
- Functional Mixins - Eric Elliott
- Mixins - JavaScript Info