.

Tags:

Being able to intercept a certain operation to an object can be really useful, in particular during a troubleshooting session. With ECMAScript 6, this is possible via its new feature, proxy. Creating a proxy on a particular object allows a predefined handler to get notified when something happens.

In the latest draft specification (Rev 15, May 14, 2013), section 15.18 on Proxy Objects is still empty. It is safe to assume that more information will be available later, when the specification starts to stabilize. Meanwhile, there is some useful information on the Direct Proxies wiki page. At the time of this writing, proxy support is already available on the latest stable version of Firefox and Chrome (experimental flag needs to be enabled).

The best way to illustrate a proxy is by a simple example (note: the code fragment is updated to use the new syntax, Proxy(target, handler), and not the deprecated Proxy.create):

var engineer = { name: 'Joe Sixpack', salary: 50 };
 
var interceptor = {
  set: function (receiver, property, value) {
    console.log(property, 'is changed to', value);
    receiver[property] = value;
  }
};
 
engineer = Proxy(engineer, interceptor);

In the above code, we create a simple object engineer. This object will be replaced by another one as the result of installing a proxy via Proxy(). The second parameter for this function is denoting a handler, interceptor in our case. A handler can have many different functions, for this simple example we have only one, set.

Let’s see what happens if we executed the following code:

engineer.salary = 60;

The handler will be called and its set function will be invoked. Thus, we will get:

salary is changed to 60

Every time a property of engineer is set, our interceptor will know about it. Obviously, there are various other operations which can be detected a proxy handler, such as property getter, keys(), iterator, and many others. Refer to the Direct Proxies wiki page for more details. Note: you might be also interested in tvcutsem/harmony-reflect which contains the polyfills so that you can use the new Proxy API on top of the deprecated one.

Beside for debugging purposes, proxy can be helpful for libraries which implement data binding. Because a handler can be hooked to the data model, there is no need to use an alternative syntax (e.g. explicit set to change a value) or to continuously track the change (e.g. dirty state) to modify the model.

How would you plan to use proxy?

  • Tom

    I would use it to trace all modifications on JS global variables in my browser, ie: window, document, …

  • http://soft.vub.ac.be/~tvcutsem Tom Van Cutsem

    Good post. To be clear: your example uses the API of the now-deprecated Proxy API. The direct proxies API you link to is the one included in the Rev15 draft (while section 15.18 is indeed still empty, the meat of the Proxy mechanism is already specified in section 8.5)

    Direct proxies are available in Firefox 18+. I have a polyfill that enables direct proxies on top of the deprecated API over at https://github.com/tvcutsem/harmony-reflect so you can also use them on current Chrome, v8 and node.js platforms.

    • http://ariya.ofilabs.com/ Ariya Hidayat

      Hi Tom! After thinking about it for a while, I think I’ll revise the syntax to follow the new API (I originally wanted to wait till the draft is updated, but better now than causing some confusing).

      Good point on the polyfill, I shall link it as well.

      Thanks for the feedback.

  • http://ecmazing.com/ Šime Vidas

    Regarding Firefox, I tested in the latest stable version. The above code example throws an error. In order to make it work, one has to invoke Proxy as a constructor instead of as a regular function, i.e. engineer = new Proxy(engineer, …

    Regarding Chrome, I’ve activated the “Enable experimental JavaScript” flag but I still get an error when I try your code example.

    • http://ariya.ofilabs.com/ Ariya Hidayat

      Use the polyfill, that gives the most accurate (so far) implementation.

  • http://rauschma.de/ Axel Rauschmayer

    I used proxies to implement automatic binding of extracted methods. Not
    yet (maybe ever) ready for real-world use, but an intriguing
    possibility.

    http://www.2ality.com/2013/06/auto-binding.html

  • zandaq

    Hm… For some reason, I always thought that proxies would be recursively applied to “folded” objects, at least the `set` handler. For example, now if we change `name` property in the example above to be an object rather than string it reacts properly:
    >> engineer.name = {first: ‘Joe’, second: ‘Sixpack’}

    << ({first:"Joe", second:"Sixpack"})
    <>engineer.name.first = ‘John’;

    <> engineer.name.first = ‘John’;

    >> engineer.name = engineer.name;

    << ({first:"John", second:"Sixpack"})
    << name is changed to ({first:"John", second:"Sixpack"})

    But it's rather strange looking code.

  • Matthew Kastor

    Great article. You ask what we would use proxies for…

    Maybe use it while testing code that makes web requests, just have the proxy return some data immediately so the tests go faster. Make a separate test to ensure the external resource still returns data in the expected format.

    Maybe use it to provide some digital prophylactics to libraries so they never really modify built in objects, basically making it possible for two useful but terribly written libs to play nice when put in a page side by side.

    I don’t know, lot of useful stuff I suppose. I’m still waiting for it to become a standard. :D