Mixin Design Pattern
Additional Patterns: Mixin Design Pattern
Could you please describe the mixin design pattern?
View Answer:
Interview Response: A mixin is a JavaScript object with methods that other classes can use without inheriting it. In other words, a mixin provides methods for implementing a specific behavior, but we don't use it on its own; instead, we use it to add the behavior to other classes.
Code Example:

Code Example:Mixins

// ES2015+ keywords/syntax used: class, constructor, const
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.gender = 'male';
}
}
// a new instance of Person can then easily be created as follows:
const clark = new Person('Clark', 'Kent');
// ES2015+ keywords/syntax used: class, constructor, extends super, const
class Superhero extends Person {
constructor(firstName, lastName, powers) {
// Invoke the superclass constructor
super(firstName, lastName);
this.powers = powers;
}
}
// A new instance of Superher gets created as follows
const SuperMan = new Superhero('Clark', 'Kent', ['flight', 'heat-vision']);
console.log(SuperMan);
/* Outputs Person attributes as well as powers
Superhero {
firstName: 'Clark',
lastName: 'Kent',
gender: 'male',
powers: [ 'flight', 'heat-vision' ]
}
*/
In JavaScript, we can look at inheriting from Mixins to collect functionality through extension. Each new class we define can have a superclass from which it can inherit methods and properties. Classes can also determine their properties and methods, and we can leverage this fact to promote function re-use.
// ES2015+ keywords/syntax used: class, constructor, extends, const, arrow functions
// Define a simple Car constructor
class Car {
constructor({ model, color }) {
this.model = model || 'no model provided';
this.color = color || 'no colour provided';
}
}
// Mixin
const Mixin = (superclass) =>
class extends superclass {
driveForward() {
console.log('drive forward');
}
driveBackward() {
console.log('drive backward');
}
driveSideways() {
console.log('drive sideways');
}
};
class MyCar extends Mixin(Car) {}
// Create a new Car
const myCar = new MyCar({
model: 'Ford Escort',
color: 'blue',
});
// Test to make sure we now have access to the methods
myCar.driveForward();
myCar.driveBackward();
// Outputs:
// drive forward
// drive backward
const mySportsCar = new MyCar({
model: 'Porsche',
color: 'red',
});
mySportsCar.driveSideways();
// Outputs:
// drive sideways