title: JavaScript inheritance: Uncaught RangeError: Maximum call stack size exceeded
body: <p>In trying to port a Java app to JavaScript, I'm attempting the following inheritance technique:</p>
  
  <pre><code>var grandchild = new Grandchild();
  
  Function.prototype.extend =
      function(parent) {
          var parentPrototype = parent.prototype;
          this.prototype = Object.create(parentPrototype);
          this.prototype.superPrototype = parentPrototype;
          this.prototype.superConstructor = parent;
          this.prototype.constructor = this;
      }
  ;
  
  function Parent(){
      this.doStuff();
  }
  
  Parent.prototype.doStuff =
      function() {
      }
  ;
  
  Child.extend(Parent);
  function Child(){
      this.superConstructor.call(this);
  }
  
  Child.prototype.doStuff = function() {
      this.superPrototype.doStuff.call(this);
  }
  
  Grandchild.extend(Child);
  function Grandchild(){
      this.superConstructor.call(this);
  }
  
  Grandchild.prototype.doStuff = function() {
      this.superPrototype.doStuff.call(this);
  }
  </code></pre>
  
  <p>It works to one level of inheritance (i.e. <code>var child = new Child()</code>) but with <code>new Grandchild()</code> it throws an <code>Uncaught RangeError: Maximum call stack size exceeded</code> because it gets stuck in infinite recursion on <code>function Child()</code>.</p>
  
  <ol>
  <li>What exactly is happening and why?</li>
  <li>How can I tweak this technique so it allows me to call <code>this.superConstructor.call(this)</code> and <code>this.superPrototype.doStuff.call(this)</code> as shown without hitting the infinite recursion on the immediate parent?</li>
  </ol>
  
  <p>It works when I specify the super class in the calls as follows, but I would prefer not to have to do this:</p>
  
  <pre><code>function Child(){
      Parent.call(this);
  }
  
  Child.prototype.doStuff = function() {
      Parent.prototype.doStuff.call(this);
  }
  
  function Grandchild(){
      Child.call(this);
  }
  
  Grandchild.prototype.doStuff = function() {
      Child.prototype.doStuff.call(this);
  }
  </code></pre>