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.

Mở bài viết về mixins tại https://javascript.info/mixins và tìm ví dụ sử dụng dấu phân cách lưu trữ dựa trên dấu gạch dưới. So sánh ví dụ đó với ví dụ dựa trên Symbol được đề xuất và đề xuất về cú pháp dấu ba chấm; hoàn tất khi bài viết phản ánh các cải tiến được yêu cầu.