Use Symbol to get a secure separation

This affects: https://javascript.info/mixins

The example uses a wired underline hack to separate the storage used by the condiment object being mixed into the mixture object.

Things get more secure and much simpler, if you think about the condiment as a function returning the object to mix in. Then you can use Symbol to generate a unique identifier, which can be used by the condiment to access its own storage.

function mixin(mixture, condiment) {
  let self = Symbol('self')
  mixture[self] = {}
  Object.assign(mixture, condiment(self))
}

function events(self) {
  return {
    on(event, react) {
      this[self][event] = react
    },
    off(event) {
      delete this[self][event]
    },
    trigger(event, ...args) {
      this[self][event](...args)
    }
  }
}

class Menu {
  choose(value) {
    this.trigger("select", value)
  }
}

mixin(Menu.prototype, events)

var menu = new Menu()

menu.on("select", value => console.log("selected:", value))
menu.choose("123")

Also, if you use already the ellipsis syntax, you can use it in both cases instead of apply.

Abre el artículo sobre mixins en https://javascript.info/mixins y localiza el ejemplo que utiliza un separador de almacenamiento basado en guiones bajos. Compáralo con el ejemplo propuesto basado en Symbol y con la sugerencia de sintaxis de elipsis; el trabajo estará terminado cuando el artículo refleje las mejoras solicitadas.