title: Javascript object inheritance
body: <p>Please help me in understanding this piece of code.</p>
  
  <pre><code>var person = {
      'first-name': 'FirstName',
      'last-name': 'LastName',
      'gender': 'Male'
  };
  
  var anotherPerson = new Object(person);
  anotherPerson.desig = 'Designation';
  
  console.log('Another person designation: ' + anotherPerson['desig'] + ', person designation: ' + person['desig']);
  </code></pre>
  
  <p>I expected the output to be <code>Another person designation: Designation, person designation: undefined</code> but to my surprise I found it to be <code>`Another person designation: Designation, person designation: Designation</code>.</p>
  
  <p>According to me <code>anotherPerson</code> is extending <code>person</code> object and properties set to <code>anotherPerson</code> should not be visible to <code>person</code> object. Am I wrong here? Or is that both the object are pointing to the same location?</p>
  
  <p><strong>[EDIT]</strong></p>
  
  <p>Now there are even more surprises.</p>
  
  <p>I added the following code to the above.</p>
  
  <pre><code>person.place = 'XYZ';
  console.log(person['place'] + ', ' + anotherPerson['place']); // Expected: XYZ, undefined. Result: XYZ, XYZ.
  </code></pre>
  
  <p>Based on the above result and answers I thought that both objects are referring to the same location. Now I added few more lines</p>
  
  <pre><code>person = undefined;
  console.log(anotherPerson['place']) //Expected: error, Result: XYZ. ??!?!?
  console.log(person['place']) // Expected: error, Result: error.
  </code></pre>
  
  <p>Can someone throw some light on me to understand this?
  Thanks for your help in advance</p>