title: console.log a javascript Object/Class - same result before and after the change of the prototype
body: <p>I'm trying to understand how <code>js prototypes</code> and <code>classes</code> work, and I'm using Chrome's <code>console.log</code> to print and have a look at the state of my objects while I add new properties etc.</p>
  
  <p>This is the code I'm using: (<a href="http://jsfiddle.net/b4VP3/" rel="nofollow noreferrer"><strong>fiddle</strong></a>)</p>
  
  <pre><code>function Person(){}
  
  Person.prototype.sayHello = function(){ alert("Hello"); };
  Person.prototype.name = "Name";
  
  console.log(Person.prototype) //1st console.log
  
  Person.prototype.surname = "Surname";
  
  console.log(Person.prototype); //2nd console.log
  </code></pre>
  
  <p>I expect to have two different results printed in the console, because the <code>surname</code> property was added <strong>after</strong> the first console log. Instead, this is the console output:</p>
  
  <p><img src="https://i.stack.imgur.com/tjFuW.png" alt="enter image description here"></p>
  
  <p>As you can see, both the outputs have the <code>surname</code> property defined even if it was added only after the 1st console.log..</p>
  
  <p>Can you explain me why? What am I missing? Doesn't console.log show the current state of the object when called?</p>
  
  <p>Thank you in advance, best regards</p>