title: JS Inheritance: calling the parent's function from within the child's function
body: <p>There must be something I don't understand about the JS object model. </p>
  
  <p>From these resources:</p>
  
  <ul>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#prototype_and_Object.getPrototypeOf" rel="noreferrer">Prototypes</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#Inheritance" rel="noreferrer">Basic OOP in JS- Inheritance</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create" rel="noreferrer">Object.create()</a></li>
  </ul>
  
  <p>I have gathered what I think, or thought, was an accurate mental representation of the object model. Here it is:</p>
  
  <hr>
  
  <p>All objects have a property, which the docs refer to as <code>[[Prototype]]</code>. <code>[[Prototype]]</code> can be thought of as a reference to the object's parent. More accurately:</p>
  
  <blockquote>
    <p>The reference to the [parent's] prototype object is copied to the
    internal <code>[[Prototype]]</code> property of the new instance. (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#prototype_and_Object.getPrototypeOf" rel="noreferrer">source 1</a>)</p>
  </blockquote>
  
  <p>You can get access to the <code>[[Prototype]]</code> property of the child with <code>Object.getPrototypeOf(child)</code> The value returned here will be a reference to the parent's prototype (not its internal <code>[[Prototype]]</code> property, but its actual prototype)</p>
  
  <p><code>obj.prototype</code> is different from the object's internal <code>[[Prototype]]</code> property. It acts like the blueprints used to make instances of this exact object, while its <code>[[Prototype]]</code> property points to the blueprints used to make instances of its parent. </p>
  
  <ul>
  <li><code>Parent.prototype === Object.getPrototypeOf(child); //true</code></li>
  </ul>
  
  <p>To elaborate:</p>
  
  <ul>
  <li><p>If you add a function to <code>child.prototype</code> the function will be available to <code>child</code> and any of it's children. </p></li>
  <li><p>If you add a function to <code>parent.prototype</code>, which is equivalent to adding a function to <code>Object.getPrototypeOf(child)</code>, then the function will be available to <code>parent</code> and all of it's children, which includes <code>child</code> and all of its <code>siblings</code>. </p></li>
  </ul>
  
  <p>You can use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create" rel="noreferrer"><code>Object.create()</code></a> to create a new object with whatever <code>[[Protoype]]</code> property you want. So you can use it as a way to implement inheritance. See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#Inheritance" rel="noreferrer">source 2</a> for an example.</p>
  
  <hr>
  
  <p>With this in mind, I wanted to get a working example of my own going. My plan was to create a parent 'class' and then make a child 'class' that inherited from it. </p>
  
  <p>I wanted the child class to implement a method, which overloaded a method from the parent. The caveat is that I want the child's version of the method to call the parent's version of the method and then do some extra stuff.</p>
  
  <p>Here is what I came up with, see below for the issues associated with it:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var Parent = function() {};
  
  Parent.prototype.myF = function() {
    console.log('derp');
  };
  
  
  function Child() {
    Parent.call(this);
  };
  
  //make [[prototype]] of Child be a ref to Parent.prototype
  Child.prototype = Object.create(Parent.prototype);
  
  //need to explicitly set the constructor
  Child.prototype.constructor = Child;
  
  Child.prototype.myF = function() {
    Object.getPrototypeOf(this).myF();
    console.log("did I derp??");
  };
  
  childInstance = new Child();
  childInstance.myF();</code></pre>
  </div>
  </div>
  </p>
  
  <p>It appears to be the case that when I attempt to overload <code>Parent.myF()</code>, while I am overloading it, I am actually modifying the original function at the same time. This appears to be the case because the logged results are:</p>
  
  <pre><code>'derp'
  'did I derp??'
  'did I derp??'
  </code></pre>
  
  <p>presumably the first occurance of <code>'did I derp??'</code> is coming from a modified version of the parent's function, which I <em>don't</em> mean to do, then the second version is coming from the child's function. </p>
  
  <p>Can anyone elaborate on why this is happening?</p>