title: JavaScript: Diagram to explain inheritance, __proto__ and prototype
body: <p>I have the following code:</p>
  
  <pre><code>function Shape(x, y) {
      this.x = x;
      this.y = y;
  }
  
  Shape.prototype.describeLocation = function() {
      return 'I am located at ' + this.x + ', ' + this.y;
  };
  
  var myShape = new Shape(1, 2);
  
  function Circle(x, y, radius) {
      Shape.call(this, x, y);  // call parent constructor
      this.radius = radius;
  }
  
  var myFirstCircle = new Circle(3, 4, 10);
  
  Circle.prototype = Object.create(Shape.prototype);
  
  Circle.prototype.calculateArea = function() {
      return 'My area is ' + (Math.PI * this.radius * this.radius);
  };
  
  var mySecondCircle = new Circle(3, 4, 10);
  </code></pre>
  
  <p>I'd like a visual* explanation of:</p>
  
  <ul>
  <li>the changes caused by <code>Circle.prototype = Object.create(Shape.prototype);</code></li>
  <li>the
  <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto" rel="nofollow noreferrer"><code>__proto__</code></a> and
  <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype" rel="nofollow noreferrer"><code>prototype</code></a>
  connections between the objects</li>
  <li>how <code>mySecondCircle</code> inherits the <code>describeLocation()</code> method from <code>Shape</code></li>
  <li>why the <code>calculateArea()</code> method exists for <code>mySecondCircle</code> but not for <code>myFirstCircle</code>:</li>
  </ul>
  
  <p></p>
  
  <pre><code>&gt; myFirstCircle.calculateArea()
  Uncaught TypeError: undefined is not a function
  
  &gt; mySecondCircle.calculateArea()
  "My area is 314.1592653589793"
  </code></pre>
  
  <hr>
  
  <p>* When trying to understand JavaScript issues regarding inheritance, a diagram really is
  <a href="http://en.wikipedia.org/wiki/A_picture_is_worth_a_thousand_words" rel="nofollow noreferrer">worth a thousand words</a>,
  and I've found the diagrams in these questions very helpful:
  <a href="https://stackoverflow.com/q/9959727">1</a>,
  <a href="https://stackoverflow.com/a/11249437">2</a>,
  <a href="https://stackoverflow.com/q/7688902">3</a>,
  <a href="https://stackoverflow.com/q/3845941">4</a>.</p>