Search code examples
javascriptobject.observe

JavaScript Object Mirroring/One-way Property Syncing


For security purposes, I have a need for a "mirrored" object. i.e. if I create object A, and shallow-clone a copy of A and call it B, whenever a property of A changes, I hope to have B automatically update itself to reflect the changes, but not the other way around. In other words, one-way property syncing.

My question: is there already a solution out in the wild that I'm not aware of?

Was thinking of implementing a library with observe-js (https://github.com/polymer/observe-js), but thought I should ask around before proceeding. Thanks.


Solution

  • Assuming you don't need to support IE8 and earlier, you can use getters to do that on modern browsers.

    function proxy(src) {
      var p = {};
      Object.keys(src).forEach(function(key) {
        Object.defineProperty(p, key, {
          get: function() {
            return src[key];
          }
        });
      });
      return p;
    }
    
    var a = {
      foo: "Original foo",
      bar: "Original bar"
    };
    var b = proxy(a);
    
    console.log(b.foo);    // "Original foo"
    a.foo = "Updated foo"; // Note we're writing to a, not b
    console.log(b.foo);    // "Updated foo"