JavaScript Mixins

0-usage.js

/**
 * Original class
 */
class Todo {
  constructor(name) {
    this.name = name || 'Untitled';
    this.done = false;
  }
  do() {
    this.done = true;
    return this;
  }
  undo() {
    this.done = false;
    return this;
  }
}

/**
 * Compose mixin with original class
 */
class ColouredTodo extends Todo {}

// Solution 1: Object mixin
Object.assign(ColouredTodo.prototype, ColouredMixin);

// Solution 2: Functional mixin
ColouredMixin(ColouredTodo.prototype);

1-object-mixin.js

const ColouredMixin = {
  setColourRGB({r, g, b}) {
    this.colourCode = {r, g, b};
    return this;
  },
  getColourRGB() {
    return this.colourCode;
  }
};

2-functional-mixin.js

const ColouredMixin = target => {
  Object.assign(target, {
    setColourRGB({r, g, b}) {
      this.colourCode = {r, g, b};
      return this;
    },
    getColourRGB() {
      return this.colourCode;
    }
  });
};