> Manuales > Manual de JavaScript

Qué es un mixin en Javascript, ejemplo de mixin para conseguir los efectos de herencia múltiple en un lenguaje de programación que no la soporta.

Mixin en Javascript

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.

Este artículo lo hemos englobado en el Manual de Javascript, pero por tratarse más de una técnica que de algo que aporta directamente el lenguaje, podría haberse agregado al taller. Lo hemos decidio colocar en el manual de Javascript finalmente porque es el lugar donde se explican muchas de las cosas que tienen que ver con los objetos y las clases de Javascript, aunque en realidad es un tema que resulta un poco más avanzado, en comparación con otros artículos.

Si eres principiante en Javascript quizás es un poco pronto para ti entender los mixins y tardes un poco más de tiempo en sacarles partido. En este caso casi te recomendamos continuar con otros artículos del manual. Si has llegado aquí justamente para saber qué son los mixin y para y cómo los puedes usar, estás en el lugar correcto!

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á:

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.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual