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