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']);

/* 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

// Outputs:
// drive forward
// drive backward

const mySportsCar = new MyCar({
model: 'Porsche',
color: 'red',


// Outputs:
// drive sideways