mixin in JavaScript

By: Yolander in Javascript Tutorials on 2023-04-26

In JavaScript, a mixin is a way to add or "mix in" functionality to an object without inheriting from it. It's a way to combine objects to create a new object that has the properties and methods of both objects.

Here's an example of a simple mixin in JavaScript:

const flyMixin = {
  fly() {
    console.log("I'm flying!");
  }
};

// Define a Bird class
class Bird {
  constructor(name) {
    this.name = name;
  }
}

// Use the mixin to add fly method to Bird class
Object.assign(Bird.prototype, flyMixin);

// Create an instance of the Bird class
const bird = new Bird('Sparrow');
bird.fly(); // Output: I'm flying!

In this example, we define a mixin called flyMixin which has a fly method. Then, we define a Bird class which does not have a fly method. We then use the Object.assign() method to add the fly method from the flyMixin to the prototype of the Bird class.

Now, when we create an instance of the Bird class, we can call the fly method on it because it has been "mixed in" from the flyMixin.

Previous
<< apply() in JavaScript

Next
Dynamically modify the option set in Dynamics 365 forms >>