# Mixins

A **Mixin** is a class containing methods that can be used by other classes without inheriting from it. In JavaScript, mixins provide a way to share behavior between classes, overcoming the limitation of single inheritance (a class can only extend one other class).

## 1. The Problem: Single Inheritance

JavaScript classes support single inheritance.

```javascript
class User extends Person {
  // User inherits from Person
}
```

If you want `User` to also have functionality from a `Disposable` class or an `Activatable` class, you can't write `class User extends Person, Disposable`.

## 2. The Solution: Mixins

A mixin is essentially a function that takes a class as input and returns a new class that extends the input class, adding new methods.

### Defining a Mixin

```javascript
// A Mixin that adds a "sayHi" method
let SayHiMixin = Base => class extends Base {
  sayHi() {
    console.log(`Hello, ${this.name}!`);
  }
};

// A Mixin that adds a "sayBye" method
let SayByeMixin = Base => class extends Base {
  sayBye() {
    console.log(`Bye, ${this.name}!`);
  }
};
```

### Using Mixins

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

// Create a new class that extends User and applies the mixins
class TalkativeUser extends SayHiMixin(SayByeMixin(User)) {}

const user = new TalkativeUser("Alice");
user.sayHi(); // "Hello, Alice!"
user.sayBye(); // "Bye, Alice!"
```

## 3. When to use Mixins?

*   **Shared Behavior:** When multiple unrelated classes need to share the same functionality (e.g., `EventEmitter`, `Serializable`).
*   **Avoiding Deep Hierarchies:** Instead of creating a deep inheritance tree (`Animal` -> `Mammal` -> `FlyingMammal` -> `Bat`), you can compose behaviors (`Bat` extends `Animal` with `FlyingMixin`).

[[programming/javascript/vanilla/javascript]]
[[programming/javascript/vanilla/prototypes-and-inheritance]]
[[programming/javascript/vanilla/es6-features]]