Skip to main content

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:



// 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' ]
}

*/
Code Example:Mixins

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