davidbgk
/
larlet-fr-david-cache
Следить 1
В избранное 0
Форкнуть 0
Код Релизы 0 Активность
A place to cache linked articles (think custom and personal wayback machine)
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
85 коммитов
1 ветка
Дерево: 7267195b2c
Ветки Теги
${ item.name }
Создать ветку ${ searchTerm }
из '7267195b2c'
${ noResults }
larlet-fr-david-cache/cache/ff61babc668fdb73cc214268acc.../index.html

index.html 31KB
Исходник Blame История

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599 
  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: Distractions (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-distractions">

  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: Distractions (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-distractions">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. <p>In <a href="http://davidwalsh.name/javascript-objects">part 1</a> of this article series, I went into great detail (aka, wordiness) about the differences between what the traditional definition of "inheritance" means and how JS's <code>[[Prototype]]</code> mechanism works. We saw that JS operates oppositely to "inheritance", being better labeled as "behavior delegation". If you haven't read it and you have any twinges of doubt or confusion about that statement, I'd encourage you to go read part 1 first.</p>&#13;

  473. &#13;

  474. <p>Inheritance implies, to an extent, copying of behavioral definition down the chain, whereas behavior delegation implies delegating behavior up the chain. These aren't just word semantics, but an important distinction that, when examined, can de-mystify a lot of confusing stuff around JS objects.</p>&#13;

  475. &#13;

  476. <p>I'm by far not the first dev to realize this truth about JS. What differs here is in my reaction to that realization. The response usually is layering on other concepts to smoothe out the rough edges or unexpected consequences of how "prototypal inheritance" can surprise us, to try to make JS <em>feel</em> more like classical OO.</p>&#13;

  477. &#13;

  478. <p><strong>I think those attempts just distract us from the plain truth of how JS works.</strong></p>&#13;

  479. &#13;

  480. <p>I would rather identify the things which are merely distractions, and set them aside, and embrace only the true essence of how JS's <code>[[Prototype]]</code> works. Rather than trying to make JS more "inheritance friendly", I'd rather rip out everything that confuses me (and others) into thinking JS has "inheritance" at all.</p>&#13;

  481. &#13;

  482. <h2>Types</h2>&#13;

  483. <p>It's often cited that in JavaScript, if you declare a function and add things to that function's prototype, then that alone makes a definition of a custom "type", which can be <em>instantiated</em>. If we were in a traditional OO language, that sort of thinking might be more appropriate, but here in JS land, it's just one of many distractions.</p>&#13;

  484. &#13;

  485. <p>You're not really creating a new type in any real sense of that word. It's not a new type that will be revealed by the<code>typeof</code> operator, and it's not going to affect the internal <code>[[Class]]</code> characteristic of a value (what would be reported by default via <code>Object#toString()</code>). It is true that you can do some self-reflection to check if an object is an "instance of" some function's construction (via the <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/instanceof"><code>instanceof</code> operator</a>). But importantly,<code>foo1 instanceof Foo</code> is just following the internal <code>[[Prototype]]</code> chain of your object <code>foo1</code> to see if at any level of that chain it happens to find the <code>.prototype</code> object attached to the <code>Foo</code> function.</p>&#13;

  486. &#13;

  487. <p>In other words, the reflection you're doing is not about checking if the value is a specified type at all, nor is it about the function constructor. It's <strong>only</strong> about asking if one object is in another object's <code>[[Prototype]]</code> chain. The name and <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8.6">semantics of the <code>instanceof</code> operator</a> (referring to "instances" and "constructor functions") are layering on extra and unnecessary meaning, which only confuses you into thinking there's anything more than simple <code>[[Prototype]]</code> chain checking going on.</p>&#13;

  488. &#13;

  489. <p>Some developers frown on the usage of <code>instanceof</code>, and so an alternate form of determining the "type" of some object is called <a href="http://en.wikipedia.org/wiki/Duck_typing">duck typing</a>, which is basically inferring a value's "type" by inspecting the object for one or more charateristic features, like a specific method or property.</p>&#13;

  490. &#13;

  491. <p>Either way, these aren't really "types", they're just approximations of types, which is one part of what makes JS's object mechanism more complicated than other languages.</p>&#13;

  492. &#13;

  493. <a name="mixins" id="mixins"/>&#13;

  494. <h2>Mixins</h2>&#13;

  495. <p>Another distraction is trying to mimic the automatic "copying" of <a href="http://www.joezimjs.com/javascript/javascript-mixins-functional-inheritance/">inheritance</a> by <a href="http://javascriptweblog.wordpress.com/2011/05/31/a-fresh-look-at-javascript-mixins/">using the "mixin"</a> pattern, which essentially manually iterates through all the methods/properties on an object and makes a "copy" (techically just a reference for functions and objects) onto the target object.</p>&#13;

  496. &#13;

  497. <p>I'm not saying that mixins are bad -- they're a very useful pattern. However, <strong>mixins have nothing to do with the<code>[[Prototype]]</code> chain</strong> or inheritance or delegation or any of that -- they rely entirely on implicit assignment of<code>this</code> by having an "owning object" at the call-time of a function/method. They are, in fact, completely circumventing the <code>[[Prototype]]</code> chain.</p>&#13;

  498. &#13;

  499. <p>Take any two independent objects, call them <code>A</code> and <code>B</code> (they don't have to be linked via <code>[[Prototype]]</code> at all), and you can still mixin <code>A</code>'s stuff into <code>B</code>. If that style of code works for your situation, use it! But just note that it has nothing to do with <code>[[Prototype]]</code> or inheritance. Trying to think of them as related is <strong>just a distraction</strong>.</p>&#13;

  500. &#13;

  501. <p>Another related distraction is when the inevitable desire to create "multiple inheritance" comes up, because JavaScript only allows an object to be <code>[[Prototype]]</code> linked to <strong>one</strong> other object at a time. When we read about the <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Details_of_the_Object_Model#No_multiple_inheritance">lack of multiple inheritance in JavaScript</a>, several problems come up, and various "solutions" are often proposed, but we never actually solve them, we just do more fancy hand-waiving to distract us from the difficulties that JS poses at the syntax/semantic level.</p>&#13;

  502. &#13;

  503. <p>For example, you basically end up doing some form of "mixin" to get multiple different sets of properties/methods added into your object, but these techniques don't, without <a href="https://shanetomlinson.com/2012/chains-use-composition-to-fake-multiple-inheritance-in-javascript/">elaborate and inefficient work-arounds</a>, gracefully handle collision if two of your "ancestor" objects have the same property or method name. Only one version of the property/method is going to end up on your object, and that's usually going to be the last one you mixed-in. There's not really a clean way to have your object reference the different versions simultaneously.</p>&#13;

  504. &#13;

  505. <p>Some people choose another distraction to resolve these problems, by using the "composition" pattern. Basically, instead of wiring your object <code>C</code> to both <code>A</code> and <code>B</code>, you just maintain a separate instance of each of <code>A</code> and<code>B</code> inside your <code>C</code> object's properties/members. Again, this is not a bad pattern, it has plenty of goodness to it.</p>&#13;

  506. &#13;

  507. <p><a href="http://www.crockford.com/javascript/inheritance.html">Parasitic Inheritance</a> is another example of a pattern that works around this "problem" that <code>[[Prototype]]</code> doesn't work like classes by simply avoiding <code>[[Prototype]]</code> altogether. It's a fine pattern, but I think it's a confusing distraction because it makes you <strong>feel</strong> like you're doing OO when you're not.</p>&#13;

  508. &#13;

  509. &#13;

  510. <p>Whatever technique you use here, you basically end up ignoring the <code>[[Prototype]]</code> chain, and doing things manually, which means you've moved away from JavaScript's "prototypal inheritance" mechanism altogether.&#13;

  511. &#13;

  512. </p><h2>Polymorphism</h2>&#13;

  513. <p>One particular distraction that ends up creating some of the most awkward code patterns we deal with in JS is polymorphism, which is the practice of having the same method or property name at different levels of your "inheritance chain", and then using <code>super</code>-style relative references to access ancestor versions of the same.</p>&#13;

  514. &#13;

  515. <p>The problem is mechanical: JavaScript provides a <code>this</code> property, but importantly it is always rooted at the bottom of the <code>[[Prototype]]</code> chain, not whatever level of the chain the current function was found at. While it's true that <code>this.foobar()</code> might end up resolving (finding) <code>foobar()</code> at an ancestor level of the chain, inside that call, his <code>this</code> will still be the original rooted <code>this</code> object.</p>&#13;

  516. &#13;

  517. <p>Put more simply, <code>this</code> is not relative, but absolute to the beginning of the call stack. If JS had a <code>super</code> or a<code>currentThis</code> (as <a href="https://gist.github.com/getify/5253319">I proposed recently</a>), then those references would be relative to whatever the currently resolved link in the <code>[[Prototype]]</code> chain was, which would allow you to make a relative reference to a link "above". But, JS does not currently have any such mechanism. And <code>this</code> being absolute rooted makes it an ineffective (or <a href="https://gist.github.com/getify/5254459">inefficient at best</a>, thus impractical) solution to these relative references that polymorphism requires.</p>&#13;

  518. &#13;

  519. <p>Most of the OO helper libraries try to provide a way for you to make <code>super</code> calls, but all of them end up having to do inefficient things under the covers to make that kind of relative call work.</p>&#13;

  520. &#13;

  521. <h2>class { .. }</h2>&#13;

  522. <p>Lastly, I think the <a href="http://infrequently.org/2012/04/class-warfare/">long and hotly debated</a> topic of <a href="http://wiki.ecmascript.org/doku.php?id=strawman:maximally_minimal_classes"><code>class { .. }</code> syntax</a> that is coming to the language in ES6 represents more of the <em>attempt to cover up what JS actually does with what people wished JS did</em>. These sorts of distractions are not likely to make understanding JS's actual mechanisms better. Some <a href="http://www.nczonline.net/blog/2012/10/16/does-javascript-need-classes/">speculate that it will make JS more approachable from traditional OO devotees</a>, which may be true at first, but I suspect the ultimate result is that they'll quickly become frustrated about how it doesn't work as they'd expect.</p>&#13;

  523. &#13;

  524. <p>What's important to understand is that the new class syntax we're getting is not introducing radically new behavior or a more classical version of inheritance. It's wrapping up how JS <code>[[Prototype]]</code> delegation currently works, in a <strong>syntax and semantics which come pre-loaded with lots of <del>baggage</del> understanding and expectation, which run quite contradictory to what you'll really get with JS classes</strong>. If you currently do not understand, or don't like, JS object "inheritance", the <code>class {..}</code> syntax is pretty unlikely to satisfy you.</p>&#13;

  525. &#13;

  526. <p>Yes, the syntax takes away some of the boilerplate of explicitly adding items to a "constructor" function's<code>.prototype</code> object, and goodness knows we all will love not having to type the <code>function</code> keyword as many times. Hooray! If you already fully understand the awkward parts of JS "classes", and you can't wait for<code>class {..}</code> to sugar up the syntax, I'm sure you're happy, but I also think you're probably in the minority. It's made far too many compromises to even make it into the language to fully please a broad range of totally opposite opinions.</p>&#13;

  527. &#13;

  528. <p>The underlying <code>[[Prototype]]</code> system isn't changing, and almost none of the difficulties we just outlined are getting measurably any better. The only exception is the addition of the <code>super</code> keyword. That will be a welcome change I suppose.</p>&#13;

  529. &#13;

  530. <p>Although, as a side note, the engine won't actually bind <code>super</code> dynamically (at call time) to the appropriate link in the <code>[[Prototype]]</code> chain, but will instead bind it statically (at definition time) based on the owning object of a function reference. This is going to possibly create some weird WTF's because the engine is going to have to create new function references on the fly as functions that use <code>super</code> are assigned around to different owning objects. It's possible (unconfirmed suspicion) that it may not work in all cases as you'd expect if <code>super</code> were instead bound dynamically.</p>&#13;

  531. &#13;

  532. <h2>Simplificationizing™</h2>&#13;

  533. <p>We've just examined a variety of ways that many JS devs try to layer on extra abstractions and concepts on top of JS's core object mechanism. I argue that this is a mistake that takes us further from the beauty of core JavaScript. Rather than adding complexity to smoothe out the rough edges, I think we need to strip things out to get to the good stuff.</p>&#13;

  534. &#13;

  535. <p>In <a href="http://davidwalsh.name/javascript-objects-deconstruction">part 3</a>, I will address exactly that, taking JS from the more complex world of classes and inheritance back to the simpler world of objects and delegation links.</p></p>

  536.   </article>

  537. </section>

  538. 

  539. 

  540. <nav id="jumpto">

  541.   <p>

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

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

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

  545.   </p>

  546. </nav>

  547. 

  548. <footer>

  549.   <div>

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

  551.     <p>

  552.       Bonjour/Hi!

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

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

  555.     </p>

  556.     <p>

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

  558.     </p>

  559.     

  560.     <p>

  561.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  578.     </p>

  579.     <p>

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

  581.     </p>

  582.     <p>

  583.       Je ne traque pas ta navigation mais mon

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

  585.       conserve des logs d’accès.

  586.     </p>

  587.   </div>

  588. </footer>

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

  590.   ;(_ => {

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

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

  593.       e.preventDefault()

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

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

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

  597.     })

  598.   })()

  599. </script>