davidbgk
/
larlet-fr-david-cache

title: Functional Mixins in ECMAScript 2015
url: http://raganwald.com/2015/06/17/functional-mixins.html
hash_url: 0970affe827a4197de22a7ccbe4fb897

<p>In <a href="http://raganwald.com/2015/06/10/mixins.html">Prototypes are Objects</a>, we saw that you can emulate “mixins” using <code>Object.assign</code> on the prototypes that underly JavaScript “classes.” We’ll revisit this subject now and spend more time looking at mixing functionality into classes.</p>

<p>First, a quick recap: In JavaScript, a “class” is implemented as a constructor function and its prototype, whether you write it directly, or use the <code>class</code> keyword. Instances of the class are created by calling the constructor with <code>new</code>. They “inherit” shared behaviour from the constructor’s <code>prototype</code> property.<sup id="fnref:delegate"><a href="#fn:delegate" class="footnote">1</a></sup></p>

<h3 id="the-object-mixin-pattern">the object mixin pattern</h3>

<p>One way to share behaviour scattered across multiple classes, or to untangle behaviour by factoring it out of an overweight prototype, is to extend a prototype with a <em>mixin</em>.</p>

<p>Here’s a class of todo items:</p>

<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Todo</span> <span class="p">{</span>
  <span class="nx">constructor</span> <span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span> <span class="o">||</span> <span class="s1">'Untitled'</span><span class="p">;</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">done</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
  <span class="p">}</span>
  <span class="k">do</span> <span class="p">()</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">done</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
    <span class="k">return</span> <span class="k">this</span><span class="p">;</span>
  <span class="p">}</span>
  <span class="nx">undo</span> <span class="p">()</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">done</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
    <span class="k">return</span> <span class="k">this</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">}</span></code></pre></div>

<p>And a “mixin” that is responsible for colour-coding:</p>

<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">const</span> <span class="nx">Coloured</span> <span class="o">=</span> <span class="p">{</span>
  <span class="nx">setColourRGB</span> <span class="p">({</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">})</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">colourCode</span> <span class="o">=</span> <span class="p">{</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">};</span>
    <span class="k">return</span> <span class="k">this</span><span class="p">;</span>
  <span class="p">},</span>
  <span class="nx">getColourRGB</span> <span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">colourCode</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">};</span></code></pre></div>

<p>Mixing colour coding into our Todo prototype is straightforward:</p>

<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nb">Object</span><span class="p">.</span><span class="nx">assign</span><span class="p">(</span><span class="nx">Todo</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="nx">Coloured</span><span class="p">);</span>

<span class="k">new</span> <span class="nx">Todo</span><span class="p">(</span><span class="s1">'test'</span><span class="p">)</span>
  <span class="p">.</span><span class="nx">setColourRGB</span><span class="p">({</span><span class="nx">r</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> <span class="nx">g</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="mi">3</span><span class="p">})</span>
  <span class="c1">//=&gt; {"name":"test","done":false,"colourCode":{"r":1,"g":2,"b":3}}</span></code></pre></div>

<p>We can “upgrade” it to have a <a href="http://raganwald.com/2015/06/04/classes-are-expressions.html">private property</a> if we wish:</p>

<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">const</span> <span class="nx">colourCode</span> <span class="o">=</span> <span class="nx">Symbol</span><span class="p">(</span><span class="s2">"colourCode"</span><span class="p">);</span>

<span class="kr">const</span> <span class="nx">Coloured</span> <span class="o">=</span> <span class="p">{</span>
  <span class="nx">setColourRGB</span> <span class="p">({</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">})</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">[</span><span class="nx">colourCode</span><span class="p">]</span><span class="o">=</span> <span class="p">{</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">};</span>
    <span class="k">return</span> <span class="k">this</span><span class="p">;</span>
  <span class="p">},</span>
  <span class="nx">getColourRGB</span> <span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="k">this</span><span class="p">[</span><span class="nx">colourCode</span><span class="p">];</span>
  <span class="p">}</span>
<span class="p">};</span></code></pre></div>

<p>So far, very easy and very simple. This is a <em>pattern</em>, a recipe for solving a certain problem using a particular organization of code.</p>

<p><a href="https://www.flickr.com/photos/chrisjrn/3771031871"><img src="/assets/images/macchiato.jpg" alt="Macchiato"/></a></p>

<h3 id="functional-mixins">functional mixins</h3>

<p>The object mixin we have above works properly, but our little recipe had two distinct steps: Define the mixin and then extend the class prototype. Angus Croll pointed out that it’s more elegant to define a mixin as a function rather than an object. He calls this a <a href="https://javascriptweblog.wordpress.com/2011/05/31/a-fresh-look-at-javascript-mixins/" title="A fresh look at JavaScript Mixins">functional mixin</a>. Here’s <code>Coloured</code> again, recast in functional form:</p>

<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">const</span> <span class="nx">Coloured</span> <span class="o">=</span> <span class="p">(</span><span class="nx">target</span><span class="p">)</span> <span class="o">=&gt;</span>
  <span class="nb">Object</span><span class="p">.</span><span class="nx">assign</span><span class="p">(</span><span class="nx">target</span><span class="p">,</span> <span class="p">{</span>
    <span class="nx">setColourRGB</span> <span class="p">({</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">})</span> <span class="p">{</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">colourCode</span> <span class="o">=</span> <span class="p">{</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">};</span>
      <span class="k">return</span> <span class="k">this</span><span class="p">;</span>
    <span class="p">},</span>
    <span class="nx">getColourRGB</span> <span class="p">()</span> <span class="p">{</span>
      <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">colourCode</span><span class="p">;</span>
    <span class="p">}</span>
  <span class="p">});</span>

<span class="nx">Coloured</span><span class="p">(</span><span class="nx">Todo</span><span class="p">.</span><span class="nx">prototype</span><span class="p">);</span></code></pre></div>

<p>We can make ourselves a <em>factory function</em> that also names the pattern:</p>

<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">const</span> <span class="nx">FunctionalMixin</span> <span class="o">=</span> <span class="p">(</span><span class="nx">behaviour</span><span class="p">)</span> <span class="o">=&gt;</span>
  <span class="nx">target</span> <span class="o">=&gt;</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">assign</span><span class="p">(</span><span class="nx">target</span><span class="p">,</span> <span class="nx">behaviour</span><span class="p">);</span></code></pre></div>

<p>This allows us to define functional mixins neatly:</p>

<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">const</span> <span class="nx">Coloured</span> <span class="o">=</span> <span class="nx">FunctionalMixin</span><span class="p">({</span>
  <span class="nx">setColourRGB</span> <span class="p">({</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">})</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">colourCode</span> <span class="o">=</span> <span class="p">{</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">};</span>
    <span class="k">return</span> <span class="k">this</span><span class="p">;</span>
  <span class="p">},</span>
  <span class="nx">getColourRGB</span> <span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">colourCode</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">});</span></code></pre></div>

<h3 id="enumerability">enumerability</h3>

<p>If we look at the way <code>class</code> defines prototypes, we find that the methods defined are not enumerable by default. This works around a common error where programmers iterate over the keys of an instance and fail to test for <code>.hasOwnProperty</code>.</p>

<p>Our object mixin pattern does not work this way, the methods defined in a mixin <em>are</em> enumerable by default, and if we carefully defined them to be non-enumerable, <code>Object.assign</code> wouldn’t mix them into the target prototype, because <code>Object.assign</code> only assigns enumerable properties.</p>

<p>And thus:</p>

<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">Coloured</span><span class="p">(</span><span class="nx">Todo</span><span class="p">.</span><span class="nx">prototype</span><span class="p">)</span>

<span class="kr">const</span> <span class="nx">urgent</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Todo</span><span class="p">(</span><span class="s2">"finish blog post"</span><span class="p">);</span>
<span class="nx">urgent</span><span class="p">.</span><span class="nx">setColourRGB</span><span class="p">({</span><span class="nx">r</span><span class="o">:</span> <span class="mi">256</span><span class="p">,</span> <span class="nx">g</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="mi">0</span><span class="p">});</span>

<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">property</span> <span class="k">in</span> <span class="nx">urgent</span><span class="p">)</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">property</span><span class="p">);</span>
  <span class="c1">// =&gt;</span>
    <span class="nx">name</span>
    <span class="nx">done</span>
    <span class="nx">colourCode</span>
    <span class="nx">setColourRGB</span>
    <span class="nx">getColourRGB</span></code></pre></div>

<p>As we can see, the <code>setColourRGB</code> and <code>getColourRGB</code> methods are enumerated, although the <code>do</code> and <code>undo</code> methods are not. This can be a problem with naïve code: we can’t always rewrite all the <em>other</em> code to carefully use <code>.hasOwnProperty</code>.</p>

<p>One benefit of functional mixins is that we can solve this problem and transparently make mixins behave like <code>class</code>:</p>

<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">const</span> <span class="nx">FunctionalMixin</span> <span class="o">=</span> <span class="p">(</span><span class="nx">behaviour</span><span class="p">)</span> <span class="o">=&gt;</span>
  <span class="kd">function</span> <span class="p">(</span><span class="nx">target</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">property</span> <span class="nx">of</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">getOwnPropertyNames</span><span class="p">(</span><span class="nx">behaviour</span><span class="p">))</span>
      <span class="nb">Object</span><span class="p">.</span><span class="nx">defineProperty</span><span class="p">(</span><span class="nx">target</span><span class="p">,</span> <span class="nx">property</span><span class="p">,</span> <span class="p">{</span> <span class="nx">value</span><span class="o">:</span> <span class="nx">behaviour</span><span class="p">[</span><span class="nx">property</span><span class="p">]</span> <span class="p">})</span>
    <span class="k">return</span> <span class="nx">target</span><span class="p">;</span>
  <span class="p">}</span></code></pre></div>

<p>The above code supports methods with ordinary string names, but sometimes methods are declared with symbols (typically to create private methods). Although we won’t discuss that pattern yet, we can support those too:</p>

<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">const</span> <span class="nx">FunctionalMixin</span> <span class="o">=</span> <span class="p">(</span><span class="nx">behaviour</span><span class="p">)</span> <span class="o">=&gt;</span>
  <span class="kd">function</span> <span class="p">(</span><span class="nx">target</span><span class="p">)</span> <span class="p">{</span>
    <span class="kr">const</span> <span class="nx">instanceKeys</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">getOwnPropertyNames</span><span class="p">(</span><span class="nx">behaviour</span><span class="p">)</span>
      <span class="p">.</span><span class="nx">concat</span><span class="p">(</span><span class="nb">Object</span><span class="p">.</span><span class="nx">getOwnPropertySymbols</span><span class="p">(</span><span class="nx">behaviour</span><span class="p">));</span>

    <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">property</span> <span class="nx">of</span> <span class="nx">instanceKeys</span><span class="p">)</span>
      <span class="nb">Object</span><span class="p">.</span><span class="nx">defineProperty</span><span class="p">(</span><span class="nx">target</span><span class="p">,</span> <span class="nx">property</span><span class="p">,</span> <span class="p">{</span> <span class="nx">value</span><span class="o">:</span> <span class="nx">behaviour</span><span class="p">[</span><span class="nx">property</span><span class="p">]</span> <span class="p">})</span>
    <span class="k">return</span> <span class="nx">target</span><span class="p">;</span>
  <span class="p">}</span></code></pre></div>

<p>Writing this out as a pattern would be tedious and error-prone. Encapsulating the behaviour into a function is a small win.</p>

<p><a href="https://www.flickr.com/photos/yellowskyphotography/7449919584"><img src="/assets/images/jbts.jpg" alt="Just Below the Surface"/></a></p>

<h3 id="mixin-responsibilities">mixin responsibilities</h3>

<p>Like classes, mixins are metaobjects: They define behaviour for instances. In addition to defining behaviour in the form of methods, classes are also responsible for initializing instances. But sometimes, classes and metaobjects handle additional responsibilities.</p>

<p>For example, sometimes a particular concept is associated with some well-known constants. When using a class, can be handy to namespace such values in the class itself:</p>

<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Todo</span> <span class="p">{</span>
  <span class="nx">constructor</span> <span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span> <span class="o">||</span> <span class="nx">Todo</span><span class="p">.</span><span class="nx">DEFAULT_NAME</span><span class="p">;</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">done</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
  <span class="p">}</span>
  <span class="k">do</span> <span class="p">()</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">done</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
    <span class="k">return</span> <span class="k">this</span><span class="p">;</span>
  <span class="p">}</span>
  <span class="nx">undo</span> <span class="p">()</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">done</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
    <span class="k">return</span> <span class="k">this</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="nx">Todo</span><span class="p">.</span><span class="nx">DEFAULT_NAME</span> <span class="o">=</span> <span class="s1">'Untitled'</span><span class="p">;</span>

<span class="c1">// If we are sticklers for read-only constants, we could write:</span>
<span class="c1">// Object.defineProperty(Todo, 'DEFAULT_NAME', {value: 'Untitled'});</span></code></pre></div>

<p>We can’t really do the same thing with simple mixins, because all of the properties in a simple mixin end up being mixed into the prototype of instances we create by default. For example, let’s say we want to define <code>Coloured.RED</code>, <code>Coloured.GREEN</code>, and <code>Coloured.BLUE</code>. But we don’t want any specific coloured instance to define <code>RED</code>, <code>GREEN</code>, or <code>BLUE</code>.</p>

<p>Again, we can solve this problem by building a functional mixin. Our <code>FunctionalMixin</code> factory function will accept an optional dictionary of read-only mixin properties, provided they are associated with a special key:</p>

<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">const</span> <span class="nx">shared</span> <span class="o">=</span> <span class="nx">Symbol</span><span class="p">(</span><span class="s2">"shared"</span><span class="p">);</span>

<span class="kd">function</span> <span class="nx">FunctionalMixin</span> <span class="p">(</span><span class="nx">behaviour</span><span class="p">)</span> <span class="p">{</span>
  <span class="kr">const</span> <span class="nx">instanceKeys</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">getOwnPropertyNames</span><span class="p">(</span><span class="nx">behaviour</span><span class="p">)</span>
    <span class="p">.</span><span class="nx">concat</span><span class="p">(</span><span class="nb">Object</span><span class="p">.</span><span class="nx">getOwnPropertySymbols</span><span class="p">(</span><span class="nx">behaviour</span><span class="p">))</span>
    <span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">key</span> <span class="o">=&gt;</span> <span class="nx">key</span> <span class="o">!==</span> <span class="nx">shared</span><span class="p">);</span>
  <span class="kr">const</span> <span class="nx">sharedBehaviour</span> <span class="o">=</span> <span class="nx">behaviour</span><span class="p">[</span><span class="nx">shared</span><span class="p">]</span> <span class="o">||</span> <span class="p">{};</span>
  <span class="kr">const</span> <span class="nx">sharedKeys</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">getOwnPropertyNames</span><span class="p">(</span><span class="nx">sharedBehaviour</span><span class="p">)</span>
    <span class="p">.</span><span class="nx">concat</span><span class="p">(</span><span class="nb">Object</span><span class="p">.</span><span class="nx">getOwnPropertySymbols</span><span class="p">(</span><span class="nx">sharedBehaviour</span><span class="p">));</span>

  <span class="kd">function</span> <span class="nx">mixin</span> <span class="p">(</span><span class="nx">target</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">property</span> <span class="nx">of</span> <span class="nx">instanceKeys</span><span class="p">)</span>
      <span class="nb">Object</span><span class="p">.</span><span class="nx">defineProperty</span><span class="p">(</span><span class="nx">target</span><span class="p">,</span> <span class="nx">property</span><span class="p">,</span> <span class="p">{</span> <span class="nx">value</span><span class="o">:</span> <span class="nx">behaviour</span><span class="p">[</span><span class="nx">property</span><span class="p">]</span> <span class="p">});</span>
    <span class="k">return</span> <span class="nx">target</span><span class="p">;</span>
  <span class="p">}</span>
  <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">property</span> <span class="nx">of</span> <span class="nx">sharedKeys</span><span class="p">)</span>
    <span class="nb">Object</span><span class="p">.</span><span class="nx">defineProperty</span><span class="p">(</span><span class="nx">mixin</span><span class="p">,</span> <span class="nx">property</span><span class="p">,</span> <span class="p">{</span>
      <span class="nx">value</span><span class="o">:</span> <span class="nx">sharedBehaviour</span><span class="p">[</span><span class="nx">property</span><span class="p">],</span>
      <span class="nx">enumerable</span><span class="o">:</span> <span class="nx">sharedBehaviour</span><span class="p">.</span><span class="nx">propertyIsEnumerable</span><span class="p">(</span><span class="nx">property</span><span class="p">)</span>
    <span class="p">});</span>
  <span class="k">return</span> <span class="nx">mixin</span><span class="p">;</span>
<span class="p">}</span>

<span class="nx">FunctionalMixin</span><span class="p">.</span><span class="nx">shared</span> <span class="o">=</span> <span class="nx">shared</span><span class="p">;</span></code></pre></div>

<p>And now we can write:</p>

<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">const</span> <span class="nx">Coloured</span> <span class="o">=</span> <span class="nx">FunctionalMixin</span><span class="p">({</span>
  <span class="nx">setColourRGB</span> <span class="p">({</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">})</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">colourCode</span> <span class="o">=</span> <span class="p">{</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">};</span>
    <span class="k">return</span> <span class="k">this</span><span class="p">;</span>
  <span class="p">},</span>
  <span class="nx">getColourRGB</span> <span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">colourCode</span><span class="p">;</span>
  <span class="p">},</span>
  <span class="p">[</span><span class="nx">FunctionalMixin</span><span class="p">.</span><span class="nx">shared</span><span class="p">]</span><span class="o">:</span> <span class="p">{</span>
    <span class="nx">RED</span><span class="o">:</span>   <span class="p">{</span> <span class="nx">r</span><span class="o">:</span> <span class="mi">255</span><span class="p">,</span> <span class="nx">g</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>   <span class="nx">b</span><span class="o">:</span> <span class="mi">0</span>   <span class="p">},</span>
    <span class="nx">GREEN</span><span class="o">:</span> <span class="p">{</span> <span class="nx">r</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>   <span class="nx">g</span><span class="o">:</span> <span class="mi">255</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="mi">0</span>   <span class="p">},</span>
    <span class="nx">BLUE</span><span class="o">:</span>  <span class="p">{</span> <span class="nx">r</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>   <span class="nx">g</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>   <span class="nx">b</span><span class="o">:</span> <span class="mi">255</span> <span class="p">},</span>
  <span class="p">}</span>
<span class="p">});</span>

<span class="nx">Coloured</span><span class="p">(</span><span class="nx">Todo</span><span class="p">.</span><span class="nx">prototype</span><span class="p">)</span>

<span class="kr">const</span> <span class="nx">urgent</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Todo</span><span class="p">(</span><span class="s2">"finish blog post"</span><span class="p">);</span>
<span class="nx">urgent</span><span class="p">.</span><span class="nx">setColourRGB</span><span class="p">(</span><span class="nx">Coloured</span><span class="p">.</span><span class="nx">RED</span><span class="p">);</span>

<span class="nx">urgent</span><span class="p">.</span><span class="nx">getColourRGB</span><span class="p">()</span>
  <span class="c1">//=&gt; {"r":255,"g":0,"b":0}</span></code></pre></div>

<h3 id="mixin-methods">mixin methods</h3>

<p>Such properties need not be values. Sometimes, classes have methods. And likewise, sometimes it makes sense for a mixin to have its own methods. One example concerns <code>instanceof</code>.</p>

<p>In earlier versions of ECMAScript, <code>instanceof</code> is an operator that checks to see whether the prototype of an instance matches the prototype of a constructor function. It works just fine with “classes,” but it does not work “out of the box” with mixins:</p>

<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">urgent</span> <span class="k">instanceof</span> <span class="nx">Todo</span>
  <span class="c1">//=&gt; true</span>

<span class="nx">urgent</span> <span class="k">instanceof</span> <span class="nx">Coloured</span>
  <span class="c1">//=&gt; false</span></code></pre></div>

<p>To handle this and some other issues where programmers are creating their own notion of dynamic types, or managing prototypes directly with <code>Object.create</code> and <code>Object.setPrototypeOf</code>, ECMAScript 2015 provides a way to override the built-in <code>instanceof</code> behaviour: An object can define a method associated with a well-known symbol, <code>Symbol.instanceOf</code>.</p>

<p>We can test this quickly:<sup id="fnref:but"><a href="#fn:but" class="footnote">2</a></sup></p>

<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">Coloured</span><span class="p">[</span><span class="nx">Symbol</span><span class="p">.</span><span class="nx">instanceOf</span><span class="p">]</span> <span class="o">=</span> <span class="p">(</span><span class="nx">instance</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="kc">true</span>
<span class="nx">urgent</span> <span class="k">instanceof</span> <span class="nx">Coloured</span>
  <span class="c1">//=&gt; true</span>
<span class="p">{}</span> <span class="k">instanceof</span> <span class="nx">Coloured</span>
  <span class="c1">//=&gt; true</span></code></pre></div>

<p>Of course, that is not semantically correct. But using this technique, we can write:</p>

<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">const</span> <span class="nx">shared</span> <span class="o">=</span> <span class="nx">Symbol</span><span class="p">(</span><span class="s2">"shared"</span><span class="p">);</span>

<span class="kd">function</span> <span class="nx">FunctionalMixin</span> <span class="p">(</span><span class="nx">behaviour</span><span class="p">)</span> <span class="p">{</span>
  <span class="kr">const</span> <span class="nx">instanceKeys</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">getOwnPropertyNames</span><span class="p">(</span><span class="nx">behaviour</span><span class="p">)</span>
    <span class="p">.</span><span class="nx">concat</span><span class="p">(</span><span class="nb">Object</span><span class="p">.</span><span class="nx">getOwnPropertySymbols</span><span class="p">(</span><span class="nx">behaviour</span><span class="p">))</span>
    <span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">key</span> <span class="o">=&gt;</span> <span class="nx">key</span> <span class="o">!==</span> <span class="nx">shared</span><span class="p">);</span>
  <span class="kr">const</span> <span class="nx">sharedBehaviour</span> <span class="o">=</span> <span class="nx">behaviour</span><span class="p">[</span><span class="nx">shared</span><span class="p">]</span> <span class="o">||</span> <span class="p">{};</span>
  <span class="kr">const</span> <span class="nx">sharedKeys</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">getOwnPropertyNames</span><span class="p">(</span><span class="nx">sharedBehaviour</span><span class="p">)</span>
    <span class="p">.</span><span class="nx">concat</span><span class="p">(</span><span class="nb">Object</span><span class="p">.</span><span class="nx">getOwnPropertySymbols</span><span class="p">(</span><span class="nx">sharedBehaviour</span><span class="p">));</span>
  <span class="kr">const</span> <span class="nx">typeTag</span> <span class="o">=</span> <span class="nx">Symbol</span><span class="p">(</span><span class="s2">"isA"</span><span class="p">);</span>

  <span class="kd">function</span> <span class="nx">mixin</span> <span class="p">(</span><span class="nx">target</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">property</span> <span class="nx">of</span> <span class="nx">instanceKeys</span><span class="p">)</span>
      <span class="nb">Object</span><span class="p">.</span><span class="nx">defineProperty</span><span class="p">(</span><span class="nx">target</span><span class="p">,</span> <span class="nx">property</span><span class="p">,</span> <span class="p">{</span> <span class="nx">value</span><span class="o">:</span> <span class="nx">behaviour</span><span class="p">[</span><span class="nx">property</span><span class="p">]</span> <span class="p">});</span>
    <span class="nx">target</span><span class="p">[</span><span class="nx">typeTag</span><span class="p">]</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
    <span class="k">return</span> <span class="nx">target</span><span class="p">;</span>
  <span class="p">}</span>
  <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">property</span> <span class="nx">of</span> <span class="nx">sharedKeys</span><span class="p">)</span>
    <span class="nb">Object</span><span class="p">.</span><span class="nx">defineProperty</span><span class="p">(</span><span class="nx">mixin</span><span class="p">,</span> <span class="nx">property</span><span class="p">,</span> <span class="p">{</span>
      <span class="nx">value</span><span class="o">:</span> <span class="nx">sharedBehaviour</span><span class="p">[</span><span class="nx">property</span><span class="p">],</span>
      <span class="nx">enumerable</span><span class="o">:</span> <span class="nx">sharedBehaviour</span><span class="p">.</span><span class="nx">propertyIsEnumerable</span><span class="p">(</span><span class="nx">property</span><span class="p">)</span>
    <span class="p">});</span>
  <span class="nx">mixin</span><span class="p">[</span><span class="nx">Symbol</span><span class="p">.</span><span class="nx">instanceOf</span><span class="p">]</span> <span class="o">=</span> <span class="p">(</span><span class="nx">instance</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="o">!!</span><span class="nx">instance</span><span class="p">[</span><span class="nx">typeTag</span><span class="p">];</span>
  <span class="k">return</span> <span class="nx">mixin</span><span class="p">;</span>
<span class="p">}</span>

<span class="nx">FunctionalMixin</span><span class="p">.</span><span class="nx">shared</span> <span class="o">=</span> <span class="nx">shared</span><span class="p">;</span>

<span class="nx">urgent</span> <span class="k">instanceof</span> <span class="nx">Coloured</span>
  <span class="c1">//=&gt; true</span>
<span class="p">{}</span> <span class="k">instanceof</span> <span class="nx">Coloured</span>
  <span class="c1">//=&gt; false</span></code></pre></div>

<p>Do you need to implement <code>instanceof</code>? Quite possibly not. “Rolling your own polymorphism” is usually a last resort. But it can be handy for writing test cases, and a few daring framework developers might be working on multiple dispatch and pattern-matching for functions.</p>

<h3 id="summary">summary</h3>

<p>The charm of the object mixin pattern is its simplicity: It really does not need an abstraction wrapped around an object literal and <code>Object.assign</code>.</p>

<p>However, behaviour defined with the mixin pattern is <em>slightly</em> different than behaviour defined with the <code>class</code> keyword. Two examples of these differences are enumerability and mixin properties (such as constants and mixin methods like <code>[Symbol.instanceof]</code>).</p>

<p>Functional mixins provide an opportunity to implement such functionality, at the cost of some complexity in the <code>FunctionalMixin</code> function that creates functional mixins.</p>

<p>As a general rule, it’s best to have things behave as similarly as possible in the domain code, and this sometimes does involve some extra complexity in the infrastructure code. But that is more of a guideline than a hard-and-fast rule, and for this reason there is a place for both the object mixin pattern <em>and</em> functional mixins in JavaScript.</p>