Javascript es un lenguaje de programación que no soporta herencia múltiple, igual que ocurre en la mayoría de los lenguajes de programación orientados a objetos. Eso no es problema, gracias a las posibilidades de Javascript y lo sencillo que es retorcer el lenguaje para llegar a conseguir cosas para las que inicialmente no está preparado.

En este artículo vamos a explicar lo que es un mixin en Javascript. Como tal, no se trata de ninguna estructura o utilidad nueva del lenguaje, que se ofrezca de manera "oficial", como podrían ser las clases, sino más bien una técnica para poder llegar a soluciones similares a la herencia múltiple, sin disponer de ella realmente.

Qué es un mixin en Javascript

Un mixin en Javascript es una función que recibe una clase base y devuelve esa misma clase base, a la que se han añadido nuevos métodos.

Es decir, un mixin es una función que devuelve una clase. El mixin para funcionar recibe como parámetro una clase base. Crea una clase anónima, que extiende de la clase base recibida por parámetro, y devuelve la clase anónima creada.

Quizás explicado con palabras es más complicado que ver que si mostramos un ejemplo de mixin:

let miMixin = (claseBase) => class extends claseBase {
    constructor() {
      super();
      this.name = "Soy c2";
    }

    saludar() {
      console.log("hola, " + this.name);
    }
}

Como puedes ver, hemos definido una función que devuelve una clase anónima. La función recibe por parámetro "claseBase" y la clase que devuelve extiende de "claseBase".

Podemos usar el mixin enviando cualquier clase base, a la que el mixin agrega un método constructor, que nos permite crear nuevas propiedades y un método extra, para agregar a la clase base.

Si has entendido esto, ya sabes todo lo que necesitas saber sobre los mixin y entenderás por qué son más que nada una técnica.

Cómo usar un mixin en Javascript

Ahora vamos a ver cómo podríamos usar ese mixin en Javascript. Como se trata simplemente de una función podemos invocarla con cualquier clase base y habremos conseguido una clase extendida a la que se han incorporado los métodos del mixin.

let ClaseNuevaExtendida = miMixin(ClaseBaseQueSeExtendera);

A continuación puedes hacer new de la ClaseNuevaExtendida, como estás acostumbrado a hacer con cualquier otra clase.

let objeto = new ClaseNuevaExtendida;

El objeto contendrá todo lo que hereda de ClaseBaseQueSeExtendera junto con todo lo que se ha incorporado por medio del mixin.

Ejemplo completo de creación y uso de mixins en Javascript

Ahora vamos a ver un ejemplo para ilustrar un poco mejor todo lo que hemos visto, para que no queden dudas sobre la creación de mixins en Javascript y su uso.

class Base1 {
  constructor() {
    this.prop = 1;
  }
  foo() {
    this.prop++;
    console.log(this.prop);
  }
}

let miMixin = (claseBase) => class extends claseBase {
  constructor() {
    super();
    this.name = "Soy c2";
  }

  saludar() {
    console.log("hola, " + this.name);
  }
}

class Extendida extends miMixin(Base1) {
  resetea() {
    this.prop = 0;
  }
}

let miObjeto = new Extendida();
miObjeto.saludar();
miObjeto.foo();
miObjeto.foo();
miObjeto.resetea()
miObjeto.foo();

En este ejemplo "miObjeto", que es un objeto de la clase Extendida, contendrá:

• Todas las propiedades y métodos heredados de la clase Base1
• Todas las propiedades y métodos heredados que ha incorporado el mixin miMixin
• Todas las propiedades y métodos que se ha declarado en la definición de la clase Extendida

La salida de este programa sería la siguiente:

hola, Soy c2
2
3
1

Conclusión sobre los mixins en Javascript

Con esto has aprendido lo que es un mixin de Javascript. Es una técnica que te conviene tener a mano, bastante típica en el día a día de la programación con el lenguaje, en lenguajes que no soportan la herencia múltiple. Para quien conozca PHP es algo como lo que nos permiten los traits.

Personalmente lo uso bastante a la hora de hacer custom elements del estándar de Web Components, ya que nos permite separar métodos que podemos llegar a utilizar desde varios componentes. Todos los métodos que quieres reutilizar en varios componentes los puedes meter en un mixin que usarás todas las veces que te haga falta, aumentando las posibilidades de reutilización del código.