ReviseAlgo Logo

OOP in JavaScript

Mixins & Composition over Inheritance

Master composition design patterns in JavaScript. Learn to combine independent features using Mixins, Object.assign, and functional composition.

Last Updated: July 15, 2026 • 10 min read

1. Introduction

In Object-Oriented programming, inheriting from a single parent class can sometimes limit design flexibility. Composition is a design pattern where you build objects by combining independent, reusable behaviors rather than inheriting from a rigid class hierarchy. JavaScript handles this using Mixins or functional composition.

2. Why It Matters

Class inheritance has a major drawback: subclasses inherit all properties and methods from their parents, even if they don't need them. Composition allows you to combine only the specific behaviors an object needs, making your code modular and easier to maintain.

3. Real-World Analogy

Think of a Multi-Tool Swiss Army Knife:

  • Rigid Inheritance (Single ancestor): Designing a tool subclass. A "PocketKnife" inherits from "CuttingBlade", which inherits from "MetalInstrument". If you want the PocketKnife to also act as a "BottleOpener", you must add bottle opening features to the parent "MetalInstrument" class, forcing all other subclasses (like scissors) to inherit bottle opening methods as well.
  • Composition (Interchangeable slots): Designing a multi-tool body. You add a blade slot, a bottle opener slot, and a screwdriver slot dynamically. You combine independent components (tools) to build the multi-tool, without requiring a shared class hierarchy.

4. Implementing Mixins

A Mixin is a function that accepts a class as an argument and returns a new subclass extended with custom behaviors, allowing you to simulate multiple inheritance:

5. Object Composition

Instead of using classes, you can also compose plain objects directly by merging independent behavior objects using Object.assign():

6. Practical Example

This script demonstrates creating a functional object creator using composition instead of constructor class inheritance:

7. Common Mistakes

  • Overusing inheritance for simple code sharing: Choosing class inheritance when objects share behaviors but do not have an "is-a" relationship (e.g. making a User class inherit from a Database connection class) can make your code rigid. Use composition instead.

8. Quick Quiz

Q1: What design principle is summarized by the phrase "Favor composition over inheritance"?

A) Subclasses should always extend a base class constructor

B) Objects should be built by combining independent, reusable behaviors rather than inheriting from a rigid class hierarchy

Answer: B — Composition builds objects by combining independent, modular behaviors, providing more flexibility than single inheritance hierarchies.

9. Scenario-Based Challenge

The Multi-Feature Game Entity:

Inside a game engine, you have player characters, hostile monsters, and static trees. Player characters can move and attack, monsters can move and attack, and static trees can do neither. Design these entities using composed helper behaviors instead of a single class hierarchy.

10. Debugging Exercise

Explain why this mixin composition chain throws a TypeError, and how to fix it:

const Loggable = (BaseClass) => class extends BaseClass {
  log(msg) { console.log(msg); }
};

// Bug: trying to apply mixin directly without a base class!
class ConsoleLogger extends Loggable // SyntaxError or TypeError! Why?
{}
View Solution

Diagnosis: The mixin function expects a base class constructor as its argument to extend. Passing nothing (or calling it incorrectly) breaks the class instantiation chain.

Fix: Pass a base class (like an empty class declaration, or the standard global Object) when applying the mixin:

// Apply mixin using Object as the base class
class ConsoleLogger extends Loggable(Object) {} // Works!
const logger = new ConsoleLogger();
logger.log('Starting...');

11. Interview Questions

🟢 Q1: Explain how mixins work in JavaScript and how they simulate multiple inheritance.

Answer: JavaScript classes only support single inheritance (a class can only extend one parent class).
• Mixins: Mixins are functions that accept a base class as an argument and return a new subclass extended with custom behaviors:
const MyMixin = (Base) => class extends Base { ... }.
• Multiple Inheritance: You can chain multiple mixin calls together (e.g. class Child extends MixinA(MixinB(Parent))) to combine behaviors from multiple sources, simulating multiple inheritance while preserving a single prototype chain.

12. Production Considerations

  • • Prototype Bloat: Chaining multiple mixin functions creates a deep prototype chain in memory. Ensure you only use mixins when necessary, and favor functional composition (like combining plain objects or functions) for simpler use cases.