Is this even possible? How about other browsers? Any estimates when es6 will be "ready" and rolled out?

btw. Proxy does not work with current chrome (36.0.n)

Is this even possible? How about other browsers? Any estimates when es6 will be "ready" and rolled out?

https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

btw. https://github./tvcutsem/harmony-reflect Proxy does not work with current chrome (36.0.n)

• javascript
• google-chrome
• polyfills
• es6-proxy

4 Answers 4

You could use Object.defineProperty and Object.observe to to simulate a Proxy. I started to wonder how much functionality a polyfill could support, so I wrote an implementation (you can see it at gist.github./mailmindlin/640e9d707ae3bd666d70). I was able to emulate all of the features of Proxy that didn't rely on operator overloading, whic isn't possible in JavaScript as of now.

However, you can get the get, set, and a few others working. You can use getters and setters to mirror the target object's properties:

for (var property in target)
    Object.defineProperty(proxy, property, {
        get: function() {
            if ('get' in handler)
                return handler.get(target, property, proxy);
            else
                return target[property];
       },
       set: function(value) {
           if ('set' in handler)
               handler.set(target, property, value, proxy);
           else
               target[property] = value;
      }});

The only problem with that is that the getters and setters only apply to properties that were defined in for the target when the proxy was initialized, and the delete operator won't work (If you delete a property on the target object, the proxy will still enumerate it as a property; if you delete a property on the proxy, nothing will happen to the object).

To fix that, you can use Object.observe which will be called on any change to either object. A quick check on caniuse. shows that Object.observe is available on Chrome and Opera. If you really need support for Proxy on another browser, you can poll the target and proxy objects, to check if any properties have been created or destroyed:

var oldKeys = Object.keys(proxy);
setInterval(function() {
    var keys = Object.keys(proxy);
    for(var i in keys)
        if(!oldKeys.includes(keys[i]))
            //Trigger code for a new property added

    for(var i in oldKeys)
        if(!keys.includes(oldKeys[i]))
            //trigger code for a deleted property

    oldKeys = keys;

    //repeat for target object
}, 100);

If you desperately need more features of the proxy, you can try overriding methods such as Object.defineProperty and Object.getOwnPropertyDescriptor, but that might create patibility issues with other scripts, depending on how you do it.

In short, you can do most of what you'll probably need to use Proxy for with a polyfill. As far as Google adding it to their browser, I have no idea. It apparently used to be part of the V8 engine, but it was removed because of security problems (that nobody elaborates on), as far as I could tell based on this thread.

I have created babel plugin whic allows you to do this but it es with huge performance impact (for each property access) - it is more education example.

https://github./krzkaczor/babel-plugin-proxy

Here is one created by the Google Chrome team: https://github./GoogleChrome/proxy-polyfill

It's not a full implementation, though.

Update: Although my answer provides a partial solution, mailmindlin's solution proves that my main point is false: you can create a polyfill for Proxy.

No, you can't. Because Proxys rely on a special (new) behavior of several language syntax elements — namely the . operator and the [index] operator — it cannot be emulated by a polyfill.

The only way do it is to change the syntax that you use. For example, if you wanted to uppercase all string properties via a proxy, you could create a "proxy" object like so:

var object = ...
var proxy = {
    get: function proxyGet(key) {
        var res = object[key];
        if (typeof res === "string") {
            res = res.toUpperCase();
        }
        return res;
     }
}

But, then you would still have to call it differently:

proxy.get("myVar");

instead of

object.myVar;

or

proxy.myVar

which is what the new Proxy syntax supports.

Note: You could almost create a polyfill that worked only for methods, by enumerating the function properties of the object, and creating a proxy function on the proxy object for each one of these properties; however, this would not work for non-function properties, since you can't dynamically affect the way they are accessed.