Skip to main content

JavaScript Mixins

Classes: Mixins

What is a Mixin in JavaScript, and why do you use them instead of a class inheritance?​

View Answer:
Interview Response: A mixin is a class containing methods that other classes can use without a need to inherit from 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.

Technical Response: We can only inherit from a single object in JavaScript. An item can only have one [[Prototype]]. A class may only extend to one additional class. This behavior is a constraint in 'class' inheritance that may necessitate the employment of a mixin. A mixin is a class with methods that other classes can utilize without inheriting from it. In other words, a mixin provides methods for implementing a specific behavior, but we do not use it by itself. We use it to add the behavior to other classes.

Code Example:

// mixin
let sayHiMixin = {
  sayHi() {
    alert(`Hello ${this.name}`);
  },
  sayBye() {
    alert(`Bye ${this.name}`);
  },
};

// usage:
class User {
  constructor(name) {
    this.name = name;
  }
}

// copy the methods
Object.assign(User.prototype, sayHiMixin);

// now User can say hi
new User('Dude').sayHi(); // Hello Dude!
note

In JavaScript, we can only inherit from a single object. There can be only one [[Prototype]] for an object. And a class may extend to only one other class. That is a limiting factor in “class” inheritance that may require the use of a mixin.

What is the simplest way to create a mixin in JavaScript?​

View Answer:
Interview Response: The most straightforward way to implement a mixin in JavaScript is to make an object with helpful methods so that we can easily merge them into a prototype of any class. There is no inheritance, but there is method copying.

Code Example:

let sayMixin = {
  say(phrase) {
    console.log(phrase);
  },
};

let sayHiMixin = {
  sayHi() {
    // call parent method
    sayMixin.say(`Hello, ${this.name}!`); // (*)
  },
  sayBye() {
    sayMixin.say(`Bye, ${this.name}!`); // (*)
  },
};

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

// copy the methods
Object.assign(User.prototype, sayHiMixin);

// now User can say hi
new User('Dude').sayHi(); // Hello, Dude!
new User('Jane').sayBye(); // Bye, Jane!

If you are interested in learning event mixins go to: https://javascript.info/mixins#eventmixin