JS Mixins

A mixin is a bundle of extra abilities you can stir into a class, like adding sprinkles to different ice creams. It lets objects share skills without a strict family tree.

In this page:

What Is a Mixin?
Multiple Mixins
Mixin Methods with this
Avoiding Duplicate Code
Mixin with a Factory

Syntax

javascript

const mixin = {
  methodName() {
    // shared behavior
  }
};
Object.assign(ClassName.prototype, mixin);

What Is a Mixin?

A mixin is a way to add reusable methods from one object to another object. Since JavaScript only supports single inheritance through the prototype chain, mixins are the common workaround for combining behavior from multiple independent sources.

उदाहरण: What Is a Mixin?

javascript

// Declare the constant `canFly`, set to `{ fly() { console.log("Flying"); } }`
// Declare the constant `canFly`, set to `{ fly() { console.log("Flying"); } }`
const canFly = { fly() { console.log("Flying"); } };
// Declare the constant `bird`, set to `{}`
// Declare the constant `bird`, set to `{}`
const bird = {};
// Call `Object.assign(bird, canFly)`
// Call `Object.assign(bird, canFly)`
Object.assign(bird, canFly);
// Call `bird.fly()`
// Call `bird.fly()`
bird.fly();

Multiple Mixins

You can combine methods from several mixin objects into one target object. Object.assign(target, mixin1, mixin2) is the typical way to apply several mixins at once, copying each one's own enumerable properties onto the target object.

उदाहरण: Multiple Mixins

javascript

// Declare the constant `canSwim`, set to `{ swim() { console.log("Swimming"); } }`
// Declare the constant `canSwim`, set to `{ swim() { console.log("Swimming"); } }`
const canSwim = { swim() { console.log("Swimming"); } };
// Declare the constant `canFly`, set to `{ fly() { console.log("Flying"); } }`
// Declare the constant `canFly`, set to `{ fly() { console.log("Flying"); } }`
const canFly = { fly() { console.log("Flying"); } };
// Declare the constant `duck`, set to `{}`
// Declare the constant `duck`, set to `{}`
const duck = {};
// Call `Object.assign(duck, canSwim, canFly)`
// Call `Object.assign(duck, canSwim, canFly)`
Object.assign(duck, canSwim, canFly);
// Call `duck.swim()`
// Call `duck.swim()`
duck.swim();
// Call `duck.fly()`
// Call `duck.fly()`
duck.fly();

Mixin Methods with this

Mixin methods can use this to access properties on the object that receives the methods.

Since Object.assign copies properties directly onto the target, methods added by a mixin behave exactly like methods defined on the object itself, including their this binding.

उदाहरण: Mixin Methods with this

javascript

// Declare the constant `canGreet`, set to `{ greet() { console.log("Hi, I'm " + this.name); } }`
// Declare the constant `canGreet`, set to `{ greet() { console.log("Hi, I'm " + this.name); } }`
const canGreet = { greet() { console.log("Hi, I'm " + this.name); } };
// Declare the constant `user`, set to `{ name: "Sam" }`
// Declare the constant `user`, set to `{ name: "Sam" }`
const user = { name: "Sam" };
// Call `Object.assign(user, canGreet)`
// Call `Object.assign(user, canGreet)`
Object.assign(user, canGreet);
// Call `user.greet()`
// Call `user.greet()`
user.greet();

Avoiding Duplicate Code

Mixins help share small pieces of behavior. They are useful when a class hierarchy does not fit the problem.

This avoids duplicating the same method definition across many unrelated classes, keeping a single source of truth for that piece of shared behavior.

उदाहरण: Avoiding Duplicate Code

javascript

// Declare the constant `canFly`, set to `{ fly() { console.log(this.name + " flies"); } }`
// Declare the constant `canFly`, set to `{ fly() { console.log(this.name + " flies"); } }`
const canFly = { fly() { console.log(this.name + " flies"); } };
class Bird { constructor(name) { this.name = name; } }
// Call `Object.assign(Bird.prototype, canFly)`
// Call `Object.assign(Bird.prototype, canFly)`
Object.assign(Bird.prototype, canFly);
// Create a new `Bird` instance with `"Tweety").fly(`
// Create a new `Bird` instance with `"Tweety").fly(`
new Bird("Tweety").fly();

Mixin with a Factory

A factory function can create objects and apply useful mixins to them. A factory function that applies mixins on creation guarantees every object built by that factory consistently gets the same combined behavior.

उदाहरण: Mixin with a Factory

javascript

// Declare the constant `canFly`, set to `{ fly() { console.log("Flying"); } }`
// Declare the constant `canFly`, set to `{ fly() { console.log("Flying"); } }`
const canFly = { fly() { console.log("Flying"); } };
// Define the function `createBird` taking `name`
// Define the function `createBird` taking `name`
function createBird(name) {
  // Declare the constant `bird`, set to `{ name }`
  // Declare the constant `bird`, set to `{ name }`
  const bird = { name };
  // Return `Object.assign(bird, canFly)` from this function
  // Return `Object.assign(bird, canFly)` from this function
  return Object.assign(bird, canFly);
}
// Call `createBird("Robin").fly()`
// Call `createBird("Robin").fly()`
createBird("Robin").fly();

Live Example

Chapter Quiz — Complete all 6 topics to unlock

0/6 topics done

Complete these topics first:

← Previous Lesson JS Object.create Next Lesson → JS WeakMap and WeakSet

JS Mixins

What Is a Mixin?

Multiple Mixins

Mixin Methods with this

Avoiding Duplicate Code

Mixin with a Factory

Chapter Quiz — Complete all 6 topics to unlock

Login to run this code