title: javascript getters and setters for all children in object
body: <p>My <code>getter/setter</code> function is</p>
  
  <pre><code>var o={}
  var bValue = {};
  Object.defineProperty(o, 'b', {
      get: function() { return bValue; },
      set: function(newValue) {func(); bValue = newValue; },
  });
  
  function func()
  {
      console.log(o)
  }
  </code></pre>
  
  <p>So if I define <code>o.b={msg:"hello"}</code> it will call the function <code>func()</code>.</p>
  
  <p>But what I want is after this if I define <code>o.b.msg="new"</code> I want to trigger <code>func()</code>.
  I tried a for loop but it's not working, it's showing "max stack exeeded" error.</p>
  
  <p>How to do this for all objects in <code>o</code> with pure JavaScript?</p>