title: Sub.prototype = new Base() vs Sub.prototype = Base.prototype
body: <p>There are many resources online about JavaScript prototyping and inheritance. Most of which use code similar to this:</p>
  
  <pre><code>function Base() {}
  function Sub() {}
  </code></pre>
  
  <p>with inheritance implemented like this:</p>
  
  <pre><code>Sub.prototype = new Base();
  </code></pre>
  
  <p>But I am wondering what is wrong with inheritance implemented this way instead:</p>
  
  <pre><code>Sub.prototype = Base.prototype;
  </code></pre>
  
  <p>It seems like the second is working just as well. The only two differences that I've spotted (which IMO are advantages of the second approach) are:</p>
  
  <ul>
  <li>there is one less dummy instantiation of <code>Base</code>, which is obviously
  better as the instance is never used anyway</li>
  <li>inspecting instances
  shows that the first approach produces two nested <code>__proto__</code>
  properties whereas the second only single one, which makes the
  instance cleaner.</li>
  </ul>
  
  <p>The latter is illustrated in below code snippet:</p>
  
  <pre><code>function Base(){}
  Base.prototype.bogus = function(){};
  function SubNew(){}
  function SubProto(){}
  
  SubNew.prototype = new Base();
  SubProto.prototype = Base.prototype;
  
  var sn = new SubNew();
  var sp = new SubProto();
  
  console.log(sn);
  console.log(sp);
  </code></pre>
  
  <p>gives:</p>
  
  <p><img src="https://i.stack.imgur.com/41rSR.png" alt="code snippet output"></p>
  
  <p>But I'm under the impression that I'm missing some very important point here. My question is: what is the case against the second approach?</p>