title: JavaScript inherit object as property
body: <p>What I currently have is an object, say b, that inherits an other object, say a. In object a I have an object as property(value). To clear things up:</p>
  
  <pre><code>var a = (function(){});
  
  a.prototype.value = {
      val : "value a"
  };
  
  var b = (function(){
      this.value.val = "b";
      alert("object b: " + this.value.val);
  });
  
  b.prototype = Object.create(a.prototype);
  b.prototype.constructor = a;
  
  new b();  // alerts "object b: b"
  </code></pre>
  
  <p><a href="http://jsfiddle.net/qqmtb846/" rel="nofollow">http://jsfiddle.net/qqmtb846/</a></p>
  
  <p>So far, so good. In object b I set the 'val' property of the 'value' object to another value. As expected the value is set(value is now 'b'). </p>
  
  <p>When I create another object, lets say c, I would expect that I get the original value('value a').</p>
  
  <p>This is not the case. I'm sure this is due object reference.</p>
  
  <pre><code>var a = (function(){});
  
  a.prototype.value = {
      val : "value a"
  };
  
  var b = (function(){
      this.value.val = "b";
      alert("object b: " + this.value.val);
  });
  
  var c = (function(){
      alert("object c: " + this.value.val);
  });
  
  b.prototype = Object.create(a.prototype);
  b.prototype.constructor = a;
  
  c.prototype = Object.create(a.prototype);
  c.prototype.constructor = a;
  
  var ObjectB = new b(); // alerts "object b: b"
  var ObjectC = new c(); // alerts "object c: b", I want that "object b: value a" is displayed
  </code></pre>
  
  <p><a href="http://jsfiddle.net/eb6dsgv9/1/" rel="nofollow">http://jsfiddle.net/eb6dsgv9/1/</a></p>
  
  <p>I want to use an object as property in the super class because most of the values will be the same, but sometimes they have to change. There is still a referance despite it's a new instance. </p>
  
  <p>1) Is this some kind of design weakness of JavaScript?
  2) How can I resolve this?</p>