8

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

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

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

4 Answers 4

5

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.com/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.com 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 compatibility 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.

1
  • Unfortunately, it seems that Object.observer was not used too much, so it was deprecated for Chrome and Opera. caniuse.com/#search=Proxy shows that Proxy is available for all major browsers (56.54% of global users), while Object.observe is available for only 8.01% (and dropping), as of August 2016. Aug 1, 2016 at 20:22
1

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

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

1

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

It's not a full implementation, though.

1

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.

3
  • 3
    You could probably also control access of non-function properties that are already defined with Object.defineProperty to set up getters and setters. Sep 9, 2015 at 1:15
  • If I understand correctly, that allows one to define accessor methods which work behind the scenes, allowing one to use the usual "dot" access syntax? That means I'm completely wrong. Why don't you expand your comment into an answer? I'd find it quite useful, as would the OP.
    – jpaugh
    Sep 9, 2015 at 12:44
  • @mailmindlin Thanks for posting your answer! I look forward to seeing your contributions to Stack Overflow in the future!
    – jpaugh
    Aug 17, 2016 at 2:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.