The missing analysis in JavaScript "Real" Mixins

I love hacks and unusual patterns! As logical consequence, I loved this post about "Real" Mixins!!!
The only hitch about that post is that I believe there are few points closer to a "gonna sell you my idea" discussion than a non disillusioned one.
Let's start this counter analysis remembering what are actually classes in latest JavaScript standard, so that we can move on explaining what's missing in there.

JavaScript embraces prototypal inheritance

It doesn't matter if ES6 made the previously reserved class keyword usable; at the end of the day we're dealing with a special syntactical shortcut to enrich a generic prototype object.

// class in ES2015
class A {
  constructor() {}
  method() {}
  get accessor() {}
  set accessor(value) {}
}

// where are those methods and properties defined?
console.log(
  Object.getOwnPropertyNames(A.prototype)
  // ["constructor", "method", "accessor"]
);

Accordingly, declaring a generic class consists in bypassing the following procedure:

function A() {}
Object.defineProperties(
  A.prototype,
  {
    // constructor is implicitly defined
    method: {
      configurable: true,
      writable: true,
      value: function method() {}
    },
    accessor: {
      configurable: true,
      get: function get() {},
      set: function set(value) {}
    }
  }
);

If you don't trust me, trust what a transpiler would do, summarized in the following code:

var A = (function () {
  // the constructor
  function A() {
    _classCallCheck(this, _temporalAssertDefined(A, "A", _temporalUndefined) && A);
  }
  // the enriched prototype
  _createClass(_temporalAssertDefined(A, "A", _temporalUndefined) && A, [{
    key: "method",
    value: function method() {}
  }, {
    key: "accessor",
    get: function get() {},
    set: function set(value) {}
  }]);

  return _temporalAssertDefined(A, "A", _temporalUndefined) && A;
})();

If there is some public static property in the definition, its assignment to the constructor would be the second bypassed part.

The super case

The extra bit in terms of syntax that makes ES6 special is the special keyword super. Being multiple inheritance not possible in JavaScript, we could think about super as the static reference to the directly extended prototype. In case of the previous B class, which extends A, we can think about super variable like if it was defined as such:

// used within the constructor
let super = (...args) => A.apply(this, arguments);

// used within any other method
super.method = (...args) => A.prototype.method.apply(this, args);

// used as accessor
Object.defineProperty(super, 'accessor', {
  get: () => Object.getOwnPropertyDescriptor(
    A.prototype, 'accessor'
  ).get.call(this),
  set: (value) => Object.getOwnPropertyDescriptor(
    A.prototype, 'accessor'
  ).set.call(this, value)
});

Now that we have a decent understanding on how inheritance works in JavaScript and what it means to declare a class, let's talk about few misleading points sold as pros or cons in the mentioned article.

Prototypes are always modified anyway!

We've just seen that defining a class technically means enriching its prototype object. This already invalidates somehow Justin point but there's more to consider.
When Justin exposes his idea on why current solutions are bad, he says that:

When using mixin libraries against prototype objects, the prototypes are directly mutated. This is a problem if the prototype is used anywhere else that the mixed-in properties are not wanted.

The way Justin describes this issue is quite misleading because mutating prototypes at runtime is a well known bad practice.
Indeed, I believe every single library he mentioned in that post, and he also forgot mine, is not designed to mutate classes prototypes at runtime ... like: not at all!
Every single mixin proposal that is capable of implementing mixins via classes is indeed designed to define these classes at definition time, not at runtime!
Moreover, whatever solution Justin proposed will not guard any class from being modified at runtime later on!
The same way he's defining his final classes during their definitions, mixins-for-classes oriented libraries have exactly the same goal: you define your class and its mixins during the class definition time!
The fact mixins add properties to a prototype is a completely hidden matter that at class definition time is everything but bad.
Also, no property is modified in place, because mixins are there to enrich, not to modify ... and having a prototype enriched means also that it's easier to spot name clashing and methods or properties conflicts ... but I'll come back to that later ...

super actually should NOT work!

The main bummer about the article is that it starts in a very reasonable way, describing mixins and classes, and also analyzing their role in a program.

The real, and only, difference between a mixin and normal subclass is that a normal subclass has a fixed superclass, while a mixin definition doesn't yet have a superclass.

Justin started right at the very beginning, and then degenerated with all sort of contradictions such:

• With JavaScript finally supporting super, so should mixins
• super.foo property access works within mixins and subclasses.
• super() calls work in constructors.
• One of the biggest benefits is that super works inside methods of the subclass and the mixins.

Then finally he's back to Sanity Village with the following sentence:

super calls can be a little unintuitive for those new to mixins because the superclass isn't known at mixin definition, and sometimes developers expect super to point to the declared superclass (the parameter to the mixin), not the mixin application.

And on top of that, Justin talks about constructors too:

Constructors are a potential source of confusion with mixins. They essentially behave like methods, except that overriden methods tend to have the same signature, while constructors in a inheritance hierarchy often have different signatures.

In case you're not convinced yet how much messed up could be the situation, I'd like to add extra examples to the plate.
Let's consider the word area and its multiple meanings:

• any particular extent of space or surface
• a geographical region
• any section reserved for a specific function
• extent, range, or scope
• field of study, or a branch of a field of study
• a piece of unoccupied ground; an open space
• the space or site on which a building stands

Now you really have to tell me in case you implement a basic Shape mixin with an area() method what the hack would you expect when invoking super. Moreoever, you should tell me if for every single method you are going to write within a mixin, you are also going to blindly invoke super with arbitrary amount of arguments in there ...

So here my quick advice about calling blindly a super: NO, followed by DON'T and eventually NEVER!

Oversold super ability

No kidding, and I can't stress this enough ... I've never ever in my life wrote a single mixin that was blindly trusting on a super call. That would be eventually an application based on mixins but that's a completely different story.
My feeling is that Justin tried to combine at all cost different concepts, probably mislead by his Dart background, since mentioned as reference, where composition in Dart was indeed classes based and the lang itself exposes native mixins as classes ... but here again we are in JavaScript!

instanceof what?

Another oversold point in Justin's article is that instanceof works.
This one was easy to spot ... I mean, if you create a class at runtime everytime the mixin is invoked, what exactly are you capable of "instanceoffing" and why would that benefit anyone about anything?
I'm writing down his very same examples here that will obviously all fail:

// a new anonymous class is created each time
// who's gonna benefit about the instanceof?
let MyMixin = (superclass) => class extends superclass {  
  foo() {
    console.log('foo from MyMixin');
  }
};

// let's try this class
class MyClass extends MyMixin(MyBaseClass) {  
  /* ... */
}

// Justin says it's cool that instanceof works ...
(new MyClass) instanceof MyMixin; // false
// false ... really, it can't be an instance of
// an arrow function prototype, isn't it?!

Accordingly, and unless I've misunderstood Justin point in which case I apologies in advance, I'm not sure what's the exact point in having instanceof working. Yes, sure the intermediate class is there, but every time the mixin is used it will create a different class so there's absolutely no advantage in having instanceof working there ... am I right?

Improving **Objects** Composition

In his Improving the Syntax paragraph, Justin exposes a very nice API summarized as such:

let mix = (superclass) => new MixinBuilder(superclass);

class MixinBuilder {  
  constructor(superclass) {
    this.superclass = superclass;
  }

  with(...mixins) { 
    return mixins.reduce((c, mixin) => mixin(c), this.superclass);
  }
}

Well, this was actually the part I've liked the most about his article, it's a very simple and semantic API, and it also doesn't need classes at all to be implemented for any kind of JS object!
How? Well, simply creating objects from objects instead:

let mix = (object) => ({
  with: (...mixins) => mixins.reduce(
    (c, mixin) => Object.create(
      c, Object.getOwnPropertyDescriptors(mixin)
    ), object)
});

It could surely be improved in order to deal with classes too but you get the idea:

let a = {a: 'a'};
let b = {b: 'b'};
let c = {c: 'c'};
let d = mix(c).with(a, b);
console.log(d);

Since the main trick in Justin proposal is to place an intermediate class in the inheritance chain, defining at runtime each time the same class and its prototype, I've done something different here that doesn't need to create a new class with its own prototype or object each time, while preserving original functionalities without affecting them.

Less RAM to use, a hopefully coming soon native Object.getOwnPropertyDescriptors that should land in ES7 and make extraction faster, and the ability to use the pattern with pretty much everything out there, modern or old.
The gist is here, feel free to reuse.

As Summary ...

Wrapping up this post, with latter proposal we can actually achieve whatever Justin did with his intermediate classes approach but following different goals:

1. Mixins are added to the prototype chain.
2. Mixins are applied without modifying existing objects.
3. Mixins do no magic, and don't define new semantics on top of the core language.
4. super.foo property access won't hopefully work within mixins but it will with subclasses methods.
5. super() calls won't hopefully work in mixins constructors because you've no idea what kind of arguments you are going to receive. Subclasses still work as expected.
6. Mixins are able to extend other mixins.
7. instanceof has no reason to be even considered in this scenario since we are composing objects.
8. Mixin definitions do not require library support - they can be written in a universal style and be compatible with non classes based engines too.
9. bonus: less memory consumption overall, there's no runtime duplication for the same logic each time

I still want to thanks Justin because he made it quite clear that still not everyone fully understands mixins but there's surely a real-world need, or better demand, in the current JavaScript community.

Let's hope the next version of ECMAScript will let all of us compose in a standard way that doesn't include a footgun like super through intermediate classes definition could do.
Thanks for your patience reading through this!