davidbgk
/
larlet-fr-david-cache
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 Commits
1 Branch
Tree: ce3bfdcef2
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'ce3bfdcef2'
${ noResults }
larlet-fr-david-cache/cache/8a69114624560f6a2ec42877c67.../index.html

index.html 32KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615 
  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>JS Objects: Inherited a Mess (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://davidwalsh.name/javascript-objects">

  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.   JS Objects: Inherited a Mess (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://davidwalsh.name/javascript-objects">Source originale du contenu</a></h3>

  463.     <h3>JS Objects: TL;DR</h3>

  464. 

  465. <p>&#13;

  466. <p>JavaScript has been plagued since the beginning with misunderstanding and awkwardness around its "prototypal inheritance" system, mostly due to the fact that "inheritance" isn't how JS works at all, and trying to do that only leads to gotchas and confusions that we have to pave over with user-land helper libs. Instead, embracing that JS has "behavior delegation" (merely delegation links between objects) fits naturally with how JS syntax works, which creates more sensible code without the need of helpers.</p>&#13;

  467. <p>When you set aside distractions like mixins, polymorphism, composition, classes, constructors, and instances, and only focus on the objects that link to each other, you gain a powerful tool in behavior delegation that is easier to write, reason about, explain, and code-maintain. Simpler is better. JS is "objects-only" (OO). Leave the classes to those other languages!</p>&#13;

  468. &#13;

  469. <h3>Due Thanks</h3>&#13;

  470. <p>I'd like to thank the following amazing devs for their generous time in feedback/tech review of this article series: David Bruant, Hugh Wood, Mark Trostler, and Mark McDonnell. I am also honored that David Walsh wanted to publish these articles on his fantastic blog.</p>&#13;

  471. &#13;

  472. <h3>Complete Series</h3>&#13;

  473. &#13;

  474. </div>&#13;

  475. &#13;

  476. <blockquote><p>year 2013: Haskell people are still writing monad tutorials, JavaScript people are still trying to explain inheritance.</p>&#13;

  477. &#13;

  478. <p>— Vyacheslav Egorov (@mraleph) <a rel="nofollow" href="https://twitter.com/mraleph/status/322843655381590016">April 12, 2013</a></p></blockquote>&#13;

  479. &#13;

  480. <p>As sad a criticism on JS as that quote is, it's quite true. (I have no perspective on Haskell or Monads, so I'm only talking about the JS and inheritance part). Of all the confusing and, depending on your biases, "bad", parts of this JS language, the behaviors of <code>this</code> and the <code>[[Prototype]]</code> chain have remained some of the most elusive to explain and use accurately.</p>&#13;

  481. &#13;

  482. <p>As a bit of background, I've been developing JS full time since 2007. The first major epiphany I had back then was the understanding of how closures work, and how they enable the classic module pattern. The first open-source project I wrote (early 2008) was <a rel="nofollow" href="https://github.com/flensed/flXHR">flXHR</a>, a cross-domain Ajax <a rel="nofollow" href="https://twitter.com/SlexAxton/status/257543702124306432">prollyfill</a> using the standard Ajax (XHR) interface (via a hidden flash element) that relied heavily upon the module pattern.</p>&#13;

  483. &#13;

  484. <p>It's quite possibly my "ah-ha!" moment around the module pattern that satisfied me enough that I never really felt a strong need to also apply the "inheritance" pattern to my JS design.</p>&#13;

  485. &#13;

  486. <p>Nevertheless, like most JS developers, I've read lots of blogs and books over the years that have tried (and mostly failed) to explain the appeal and mystery that is "JavaScript inheritance" (aka, "prototypal inheritance").</p>&#13;

  487. &#13;

  488. <p>But if it's so hard to understand, and even harder to actually do correctly, the <em>point</em> yet eludes me. And apparently I'm not alone in that frustration.</p>&#13;

  489. &#13;

  490. <h2>OO in JavaScript</h2>&#13;

  491. <p>In traditional <a rel="nofollow" href="http://en.wikipedia.org/wiki/Object-oriented_programming">Object-oriented languages</a>, the <a rel="nofollow" href="http://www.cs.bu.edu/teaching/cpp/inheritance/intro/">syntax of classes</a> matches the semantics. You can express the object-oriented concepts of classes, inheritance, and polymorphism directly and explicitly using the language's syntax. There's no need to use some helper library to fake your way into OO-like behavior through work-arounds of other language facilities.</p>&#13;

  492. &#13;

  493. <p>JavaScript on the other hand has <a rel="nofollow" href="https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript">a set of syntax that looks somewhat OO</a>, but which behaves in frustratingly different ways (which we will cover throughout this article series). As a result, the common way that you implement OO patterns in JS is through any of a variety of user-land helper libraries which let you express the desired semantic relationships between your "objects". The reason most JS developers use them is because the underlying JS syntax makes those semantic expressions awkward. It's nice to just let a library handle paving over the confusing syntax hiccups.</p>&#13;

  494. &#13;

  495. <p>Libraries like jQuery are useful because they hide the ugly details of dealing with <strong>cross-browser differences in JS engines</strong>. But these OO-helper libraries are different: they're going to great lengths to <strong>hide the true nature of JavaScript's OO mechanisms</strong>, instead masking them in a set of patterns that are more familiar to other languages.</p>&#13;

  496. &#13;

  497. <p>At this point of understanding, we should really ask ourselves: is the difficulty of <a rel="nofollow" href="http://javascript.crockford.com/inheritance.html">expressing classes and inheritance in pure JavaScript</a> a failure of the language (one which can <a rel="nofollow" href="http://prototypejs.org/learn/class-inheritance">temporarily</a> be <a rel="nofollow" href="http://mootools.net/docs/core/Class/Class">solved</a> with <a rel="nofollow" href="http://ejohn.org/blog/simple-javascript-inheritance/">user libraries</a>and ultimately solved by <a rel="nofollow" href="http://wiki.ecmascript.org/doku.php?id=strawman:maximally_minimal_classes">additions to the language like <code>class { .. }</code></a> syntax), <a rel="nofollow" href="https://c9.io/site/blog/2011/11/the-time-has-come-to-add-classes-to-javascript/">as many</a> devs <a rel="nofollow" href="http://www.nczonline.net/blog/2012/10/16/does-javascript-need-classes/">feel</a>, or is it something deeper? Is it indicative of a more fundamental disparity, that we're trying to <a rel="nofollow" href="http://www.kirupa.com/html5/objects_classes_javascript.htm">do something in JS</a> that it's<a rel="nofollow" href="http://webreflection.blogspot.com/2010/01/better-javascript-classes.html">just not meant to do</a>?</p>&#13;

  498. &#13;

  499. <p><a rel="nofollow" href="http://www.2ality.com/2011/11/javascript-classes.html">Not everyone</a> drank the JS classes kool-aid, so the rest of this article series will favor a different perspective.</p>&#13;

  500. <h2>Blueprint</h2>&#13;

  501. <p>One of the most common metaphors used in <a rel="nofollow" href="http://www.tutorialspoint.com/cplusplus/cpp_inheritance.htm">traditional class/inheritance OO</a> is that the <a rel="nofollow" href="http://msdn.microsoft.com/en-us/library/ee5edha0%28v=vs.80%29.aspx">class represents a "blueprint"</a> for a house to be built, but once you instantiate that class, you are basically copying all the characteristics from the blueprint into the actual built house. This metaphor partially matches, to an extent, what actually happens at a language level when the code is compiled, in that it sort-of flattens the definition of a class (sans "virtual" methods) inheritance hierarchy into the instance.</p>&#13;

  502. &#13;

  503. <p>Of course, a main pillar of <a rel="nofollow" href="http://www.alexonlinux.com/how-inheritance-encapsulation-and-polymorphism-work-in-cpp">inheritance-oriented coding is overriding and polymorphism</a>, which allows an object to<em>automatically</em> access the most descendant definition for a method, but also to use <code>super</code>-style relative references to access ancestor (aka "virtual") versions of the <em>same-named</em> method. In those cases, the compiler maintains lookup tables for the virtual methods, but it flattens out the non-virtual parts of the class/inheritance definition. The compiler can determine a lot about what needs to be preserved and not and highly optimize the definition structure it creates in the compiled code.</p>&#13;

  504. &#13;

  505. <p>For our purposes, we can think of traditional class-inheritance as basically a flattening "copy" of behavior down the chain to the instance. Here's a diagram to illustrate the inheritance relationship between a parent/base class<code>Foo</code>, and child class <code>Bar</code>, and then instances of each, respectively named <code>foo1</code>, <code>foo2</code>, <code>bar1</code>, and<code>bar2</code>. Visually, the arrows (aka, "copying") point from left-to-right and top-to-bottom:</p>&#13;

  506. &#13;

  507. <p><a rel="nofollow" href="http://davidwalsh.name/demo/InheritanceArrows.png" target="_blank"><img alt="Inheritance Arrows" src="http://davidwalsh.name/demo/InheritanceArrows.png"/></a></p>&#13;

  508. <h2>What's in a name?</h2>&#13;

  509. <p>Despite the borrowed implications of the common name "prototypal inheritance", JavaScript's mechanism works quite differently, which we'll see in just a moment.</p>&#13;

  510. &#13;

  511. <p>Both <a rel="nofollow" href="http://dictionary.reference.com/browse/inheritance?s=t">definitionally</a> ("...characteristics transmitted from parent to offspring") and behaviorally (as described above), "inheritance" is most closely associated with the idea of "copying" from parent to child.</p>&#13;

  512. &#13;

  513. <p>When you then take "inheritance" and apply it to a mechanism which has some very different behavior, you are asking for the confusion which has plagued "JavaScript inheritance" <a rel="nofollow" href="https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript">documentation</a>, <a rel="nofollow" href="http://blog.rjzaworski.com/2013/03/composition-in-javascript/">education</a>, and <a rel="nofollow" href="http://tobyho.com/2011/11/11/js-object-inheritance/">usage</a> for nearly 2 decades.</p>&#13;

  514. &#13;

  515. <p>To try to wade through this mess, let's set aside the label "inheritance" and its implications for JS, and hopefully we can arrive at something that is both conceptually more accurate and functionally more useful.</p>&#13;

  516. <h2>A.B.D's: Always Be Delegating</h2>&#13;

  517. <p>JavaScript's OO-like property mechanism for <a rel="nofollow" href="http://www.ecma-international.org/ecma-262/5.1/#sec-8.6">objects</a> is notated by <code>[[Prototype]]</code>, which is the internal characteristic of <strong>any object</strong> called its prototype-chain -- a special link to another object. It's kind of like a scope mechanism, in that the <code>[[Prototype]]</code> linkage <a rel="nofollow" href="http://www.ecma-international.org/ecma-262/5.1/#sec-8.12.2">describes which alternate object should be referred to</a> if you request a property or method on your object which doesn't exist.</p>&#13;

  518. &#13;

  519. <p>In other words, you're indicating an object to <strong>delegate</strong> behavior to if that behavior isn't defined on the object in question.</p>&#13;

  520. &#13;

  521. <p>The above class-oriented <code>Foo</code> and <code>Bar</code> example, expressed in JS, relates object <code>Bar.prototype</code> to<code>Foo.prototype</code>, and then the <code>foo1</code>, <code>foo2</code>, <code>bar1</code> and <code>bar2</code> objects to their respective <code>[[Prototype]]</code>s. The arrows (not copies but live-links) point in a right-to-left, bottom-to-top fashion in JS:</p>&#13;

  522. &#13;

  523. <p><a rel="nofollow" href="https://dl.dropboxusercontent.com/u/2474669/jsdiagrams/DelegationArrows.png" target="_blank"><img alt="Delegation Arrows" src="http://davidwalsh.name/demo/DelegationArrows.png"/></a></p>&#13;

  524. &#13;

  525. <p>"Behavior delegation" is a more accurate term to describe JavaScript's <code>[[Prototype]]</code>. This is not just a matter of word semantics, it's a fundamentally different type of functionality.</p>&#13;

  526. &#13;

  527. <p>If you try to illustrate behavior delegation in terms of the "blueprint" metaphor, you quickly see how it totally breaks down. There's no way that my home, lacking a guest bedroom, could simply refer to another house, or to the original blueprints, to provide a bedroom for my mother-in-law when she comes to visit. Though the outcomes you can achieve have <strong><em>some</em></strong> respective similarities, the concepts of "inheritance" and "behavior delegation" <em>are quite different</em>.</p>&#13;

  528. &#13;

  529. <p>Some devs insist that "delegation" is just the dynamic version of "inheritance", like two sides of the same coin, but I see them <strong>as orthagonal systems</strong>.</p>&#13;

  530. &#13;

  531. <h3>How to delegate?</h3>&#13;

  532. <p>We'll revisit this later in the article series, but <a rel="nofollow" href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/create"><code>Object.create(..)</code> was added to ES5</a> to assist with creating an object and then optionally linking its <code>[[Prototype]]</code> to another object. The link that is created is a delegation link, as opposed to an inheritance-by-copy.</p>&#13;

  533. &#13;

  534. <p><strong>Note:</strong> Once an object has its <code>[[Prototype]]</code> chain set at its creation, it <em>should</em> for the most part be considered set in stone and not changeable. Technically, browsers which support <a rel="nofollow" href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/proto">the <code><strong>proto</strong></code> property</a>, a public representation of the internal link, allow you to change at any time where an object is linked to. However, this practice is littered with landmines and generally frowned upon -- it's almost certainly something you'd want to<strong>avoid</strong> in your code.</p>&#13;

  535. &#13;

  536. <h2>Spade a Spade</h2>&#13;

  537. <p>You've seen how the mechanisms in JavaScript are comparitively different from the mechanisms in other languages. But is it ok to just hand-waive over these differences so we can keep using the term "inheritance" for JS?</p>&#13;

  538. &#13;

  539. <p>The fact is, it's just <strong>not</strong> an accurate usage of the term. By insisting that JavaScript has "inheritance", we're really saying that the meaning of the word "inheritance" doesn't matter, or is rather soft.</p>&#13;

  540. &#13;

  541. <p>JS doesn't statically analyze what parts of an inheritance chain it can safely flatten out <strong>and copy</strong>, it maintains links to the entire delegation chain throughout runtime, <strong>as distinct objects</strong>, which means our code can take advantage of <a rel="nofollow" href="http://michaux.ca/articles/early-mixins-late-mixins">a variety of powerful "late binding" dynamic patterns</a>.</p>&#13;

  542. &#13;

  543. <p>If we keep trying to mimic inheritance in JavaScript (syntax hurdles be damned), we get <em>distracted</em> and <strong>miss out on <em>all that power</em> that was built into our language from the start</strong>.</p>&#13;

  544. &#13;

  545. <p>I say: let's call it what it is, and stop trying to pile on JavaScript these other concepts that the "inheritance" label implies.&#13;

  546. </p><h2>So What?</h2>&#13;

  547. <p>So far, I've tried to identify some misconceptions about JS's <code>[[Prototype]]</code> mechanism and how "inheritance" is not a helpful label.</p>&#13;

  548. &#13;

  549. <p>You may still be skeptical why it <em>actually</em> matters what we call this OO-like mechanism in JS? In the <a href="http://davidwalsh.name/javascript-objects-distractions">next part</a> of the article series, I'm going to address many of the trappings of traditional "class-based" programming which I think are distractions that lead us to missing out on the essence of how JS objects interoperate. In fact, we could even say that <a rel="nofollow" href="http://www.infoq.com/presentations/Classes-Are-Premature-Optimization">classes/inheritance are a premature optimization</a> for JavaScript.</p>&#13;

  550. &#13;

  551. <p>Clearing those distractions out of the way leads us to <a href="http://davidwalsh.name/javascript-objects-deconstruction">part 3</a>, where we'll see a simpler and more robust pattern for our JS code, and more importantly, <strong>our code will actually match our semantics</strong> <em>without</em> us having to jump through hoops to hide the ugly mismatches.</p></p>

  552.   </article>

  553. </section>

  554. 

  555. 

  556. <nav id="jumpto">

  557.   <p>

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

  559.     <a href="http://davidwalsh.name/javascript-objects">Source originale</a> |

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

  561.   </p>

  562. </nav>

  563. 

  564. <footer>

  565.   <div>

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

  567.     <p>

  568.       Bonjour/Hi!

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

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

  571.     </p>

  572.     <p>

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

  574.     </p>

  575.     

  576.     <p>

  577.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  594.     </p>

  595.     <p>

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

  597.     </p>

  598.     <p>

  599.       Je ne traque pas ta navigation mais mon

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

  601.       conserve des logs d’accès.

  602.     </p>

  603.   </div>

  604. </footer>

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

  606.   ;(_ => {

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

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

  609.       e.preventDefault()

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

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

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

  613.     })

  614.   })()

  615. </script>