davidbgk
/
larlet-fr-david-cache
Observar 1
Favorito 0
Fork 0
Código Versões 0 Atividade
A place to cache linked articles (think custom and personal wayback machine)
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
189 Commits
1 Branch
Tag: 06afadf666
Branches Tags
${ item.name }
Criar branch ${ searchTerm }
de 06afadf666
${ noResults }
larlet-fr-david-cache/cache/0970affe827a4197de22a7ccbe4.../index.html

index.html 52KB
Original Anotar Histórico

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Functional Mixins in ECMAScript 2015 (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="http://raganwald.com/2015/06/17/functional-mixins.html">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Functional Mixins in ECMAScript 2015 (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="http://raganwald.com/2015/06/17/functional-mixins.html">Source originale du contenu</a></h3>

  463.     <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>

  464. 

  465. <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>

  466. 

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

  468. 

  469. <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>

  470. 

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

  472. 

  473. <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>

  474.   <span class="nx">constructor</span> <span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>

  475.     <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>

  476.     <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>

  477.   <span class="p">}</span>

  478.   <span class="k">do</span> <span class="p">()</span> <span class="p">{</span>

  479.     <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>

  480.     <span class="k">return</span> <span class="k">this</span><span class="p">;</span>

  481.   <span class="p">}</span>

  482.   <span class="nx">undo</span> <span class="p">()</span> <span class="p">{</span>

  483.     <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>

  484.     <span class="k">return</span> <span class="k">this</span><span class="p">;</span>

  485.   <span class="p">}</span>

  486. <span class="p">}</span></code></pre></div>

  487. 

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

  489. 

  490. <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>

  491.   <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>

  492.     <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>

  493.     <span class="k">return</span> <span class="k">this</span><span class="p">;</span>

  494.   <span class="p">},</span>

  495.   <span class="nx">getColourRGB</span> <span class="p">()</span> <span class="p">{</span>

  496.     <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">colourCode</span><span class="p">;</span>

  497.   <span class="p">}</span>

  498. <span class="p">};</span></code></pre></div>

  499. 

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

  501. 

  502. <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>

  503. 

  504. <span class="k">new</span> <span class="nx">Todo</span><span class="p">(</span><span class="s1">'test'</span><span class="p">)</span>

  505.   <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>

  506.   <span class="c1">//=&gt; {"name":"test","done":false,"colourCode":{"r":1,"g":2,"b":3}}</span></code></pre></div>

  507. 

  508. <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>

  509. 

  510. <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>

  511. 

  512. <span class="kr">const</span> <span class="nx">Coloured</span> <span class="o">=</span> <span class="p">{</span>

  513.   <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>

  514.     <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>

  515.     <span class="k">return</span> <span class="k">this</span><span class="p">;</span>

  516.   <span class="p">},</span>

  517.   <span class="nx">getColourRGB</span> <span class="p">()</span> <span class="p">{</span>

  518.     <span class="k">return</span> <span class="k">this</span><span class="p">[</span><span class="nx">colourCode</span><span class="p">];</span>

  519.   <span class="p">}</span>

  520. <span class="p">};</span></code></pre></div>

  521. 

  522. <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>

  523. 

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

  525. 

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

  527. 

  528. <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>

  529. 

  530. <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>

  531.   <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>

  532.     <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>

  533.       <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>

  534.       <span class="k">return</span> <span class="k">this</span><span class="p">;</span>

  535.     <span class="p">},</span>

  536.     <span class="nx">getColourRGB</span> <span class="p">()</span> <span class="p">{</span>

  537.       <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">colourCode</span><span class="p">;</span>

  538.     <span class="p">}</span>

  539.   <span class="p">});</span>

  540. 

  541. <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>

  542. 

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

  544. 

  545. <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>

  546.   <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>

  547. 

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

  549. 

  550. <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>

  551.   <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>

  552.     <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>

  553.     <span class="k">return</span> <span class="k">this</span><span class="p">;</span>

  554.   <span class="p">},</span>

  555.   <span class="nx">getColourRGB</span> <span class="p">()</span> <span class="p">{</span>

  556.     <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">colourCode</span><span class="p">;</span>

  557.   <span class="p">}</span>

  558. <span class="p">});</span></code></pre></div>

  559. 

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

  561. 

  562. <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>

  563. 

  564. <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>

  565. 

  566. <p>And thus:</p>

  567. 

  568. <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>

  569. 

  570. <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>

  571. <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>

  572. 

  573. <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>

  574.   <span class="c1">// =&gt;</span>

  575.     <span class="nx">name</span>

  576.     <span class="nx">done</span>

  577.     <span class="nx">colourCode</span>

  578.     <span class="nx">setColourRGB</span>

  579.     <span class="nx">getColourRGB</span></code></pre></div>

  580. 

  581. <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>

  582. 

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

  584. 

  585. <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>

  586.   <span class="kd">function</span> <span class="p">(</span><span class="nx">target</span><span class="p">)</span> <span class="p">{</span>

  587.     <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>

  588.       <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>

  589.     <span class="k">return</span> <span class="nx">target</span><span class="p">;</span>

  590.   <span class="p">}</span></code></pre></div>

  591. 

  592. <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>

  593. 

  594. <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>

  595.   <span class="kd">function</span> <span class="p">(</span><span class="nx">target</span><span class="p">)</span> <span class="p">{</span>

  596.     <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>

  597.       <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>

  598. 

  599.     <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>

  600.       <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>

  601.     <span class="k">return</span> <span class="nx">target</span><span class="p">;</span>

  602.   <span class="p">}</span></code></pre></div>

  603. 

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

  605. 

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

  607. 

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

  609. 

  610. <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>

  611. 

  612. <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>

  613. 

  614. <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>

  615.   <span class="nx">constructor</span> <span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>

  616.     <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>

  617.     <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>

  618.   <span class="p">}</span>

  619.   <span class="k">do</span> <span class="p">()</span> <span class="p">{</span>

  620.     <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>

  621.     <span class="k">return</span> <span class="k">this</span><span class="p">;</span>

  622.   <span class="p">}</span>

  623.   <span class="nx">undo</span> <span class="p">()</span> <span class="p">{</span>

  624.     <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>

  625.     <span class="k">return</span> <span class="k">this</span><span class="p">;</span>

  626.   <span class="p">}</span>

  627. <span class="p">}</span>

  628. 

  629. <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>

  630. 

  631. <span class="c1">// If we are sticklers for read-only constants, we could write:</span>

  632. <span class="c1">// Object.defineProperty(Todo, 'DEFAULT_NAME', {value: 'Untitled'});</span></code></pre></div>

  633. 

  634. <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>

  635. 

  636. <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>

  637. 

  638. <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>

  639. 

  640. <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>

  641.   <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>

  642.     <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>

  643.     <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>

  644.   <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>

  645.   <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>

  646.     <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>

  647. 

  648.   <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>

  649.     <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>

  650.       <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>

  651.     <span class="k">return</span> <span class="nx">target</span><span class="p">;</span>

  652.   <span class="p">}</span>

  653.   <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>

  654.     <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>

  655.       <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>

  656.       <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>

  657.     <span class="p">});</span>

  658.   <span class="k">return</span> <span class="nx">mixin</span><span class="p">;</span>

  659. <span class="p">}</span>

  660. 

  661. <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>

  662. 

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

  664. 

  665. <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>

  666.   <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>

  667.     <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>

  668.     <span class="k">return</span> <span class="k">this</span><span class="p">;</span>

  669.   <span class="p">},</span>

  670.   <span class="nx">getColourRGB</span> <span class="p">()</span> <span class="p">{</span>

  671.     <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">colourCode</span><span class="p">;</span>

  672.   <span class="p">},</span>

  673.   <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>

  674.     <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>

  675.     <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>

  676.     <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>

  677.   <span class="p">}</span>

  678. <span class="p">});</span>

  679. 

  680. <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>

  681. 

  682. <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>

  683. <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>

  684. 

  685. <span class="nx">urgent</span><span class="p">.</span><span class="nx">getColourRGB</span><span class="p">()</span>

  686.   <span class="c1">//=&gt; {"r":255,"g":0,"b":0}</span></code></pre></div>

  687. 

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

  689. 

  690. <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>

  691. 

  692. <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>

  693. 

  694. <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>

  695.   <span class="c1">//=&gt; true</span>

  696. 

  697. <span class="nx">urgent</span> <span class="k">instanceof</span> <span class="nx">Coloured</span>

  698.   <span class="c1">//=&gt; false</span></code></pre></div>

  699. 

  700. <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>

  701. 

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

  703. 

  704. <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>

  705. <span class="nx">urgent</span> <span class="k">instanceof</span> <span class="nx">Coloured</span>

  706.   <span class="c1">//=&gt; true</span>

  707. <span class="p">{}</span> <span class="k">instanceof</span> <span class="nx">Coloured</span>

  708.   <span class="c1">//=&gt; true</span></code></pre></div>

  709. 

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

  711. 

  712. <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>

  713. 

  714. <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>

  715.   <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>

  716.     <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>

  717.     <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>

  718.   <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>

  719.   <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>

  720.     <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>

  721.   <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>

  722. 

  723.   <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>

  724.     <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>

  725.       <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>

  726.     <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>

  727.     <span class="k">return</span> <span class="nx">target</span><span class="p">;</span>

  728.   <span class="p">}</span>

  729.   <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>

  730.     <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>

  731.       <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>

  732.       <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>

  733.     <span class="p">});</span>

  734.   <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>

  735.   <span class="k">return</span> <span class="nx">mixin</span><span class="p">;</span>

  736. <span class="p">}</span>

  737. 

  738. <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>

  739. 

  740. <span class="nx">urgent</span> <span class="k">instanceof</span> <span class="nx">Coloured</span>

  741.   <span class="c1">//=&gt; true</span>

  742. <span class="p">{}</span> <span class="k">instanceof</span> <span class="nx">Coloured</span>

  743.   <span class="c1">//=&gt; false</span></code></pre></div>

  744. 

  745. <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>

  746. 

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

  748. 

  749. <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>

  750. 

  751. <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>

  752. 

  753. <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>

  754. 

  755. <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>

  756.   </article>

  757. </section>

  758. 

  759. 

  760. <nav id="jumpto">

  761.   <p>

  762.     <a href="/david/blog/">Accueil du blog</a> |

  763.     <a href="http://raganwald.com/2015/06/17/functional-mixins.html">Source originale</a> |

  764.     <a href="/david/stream/2019/">Accueil du flux</a>

  765.   </p>

  766. </nav>

  767. 

  768. <footer>

  769.   <div>

  770.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  771.     <p>

  772.       Bonjour/Hi!

  773.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  774.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  775.     </p>

  776.     <p>

  777.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  778.     </p>

  779.     

  780.     <p>

  781.       Voici quelques articles choisis :

  782.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  783.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  784.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  785.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  786.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  787.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  788.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  789.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  790.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  791.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  792.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  793.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  794.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  795.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  796.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  797.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  798.     </p>

  799.     <p>

  800.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  801.     </p>

  802.     <p>

  803.       Je ne traque pas ta navigation mais mon

  804.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  805.       conserve des logs d’accès.

  806.     </p>

  807.   </div>

  808. </footer>

  809. <script type="text/javascript">

  810.   ;(_ => {

  811.     const jumper = document.getElementById('jumper')

  812.     jumper.addEventListener('click', e => {

  813.       e.preventDefault()

  814.       const anchor = e.target.getAttribute('href')

  815.       const targetEl = document.getElementById(anchor.substring(1))

  816.       targetEl.scrollIntoView({behavior: 'smooth'})

  817.     })

  818.   })()

  819. </script>