I'm running the following script through Google Chrome Version 57.0.2987.133:

var loggingProxyHandler = {
    "get" : function(targetObj, propName, receiverProxy) {
        let ret = Reflect.get(targetObj, propName, receiverProxy);
        console.log("get("+propName.toString()+"="+ret+")");
        return ret;
     },

     "set" : function(targetObj, propName, propValue, receiverProxy) {
         console.log("set("+propName.toString()+"="+propValue+")");
         return Reflect.set(targetObj, propName, propValue, receiverProxy);
     }
};

function onRunTest()
{
    let m1 = new Map();
    let p1 = new Proxy(m1, loggingProxyHandler);
    p1.set("a", "aval");   // Exception thrown from here
}

onRunTest();
NOTE: Requires a browser supporting ES2015's Proxy

When run, I see the handler's get trap is called to return the Map's set function and then I receive the following error:

"Uncaught TypeError: Method Map.prototype.set called on incompatible receiver [object Object]"
at Proxy.set (native)
...

I tried removing the trap functions from the loggingProxyHandler (making it an empty object) but still receive the same error.

My understanding was that a Proxy object was supposed to be able to generated for all native ES5 and ES2015 javascript objects. Array seems to work well under the same proxy handler. Did I misunderstand the specs?
Is my code missing something? Is there a known bug in Chrome? (I did a search and found no defects for Chrome on this subject.)

  • possible duplicate of Why is my Proxy wrapping a Map's function calls throwing TypeError? – Bergi Apr 5 '17 at 16:13
  • 1
    It sounds like what you actually wanted to do is override (intercept) set and get calls, not route all property accesses through a proxy? – Bergi Apr 5 '17 at 16:16
  • To make it clear: Don't use Proxy to intercept exotic behavior, which goes beyond normal Object semantics. Use subclassing instead. – ftor Oct 7 '17 at 10:57

The reason you're getting the error is that the proxy isn't getting involved in the p1.set call (other than that the set trap — unrelated, despite same name — is getting called to retrieve the function reference). So once the function reference has been retrieved, it's called with this set to the proxy, not the Map — which Map doesn't like.

If you're really trying to intercept all property access calls on the Map, you can fix it by binding any function references you're returning from get (see the *** lines):

var loggingProxyHandler = {
    "get" : function(targetObj, propName, receiverProxy) {
        let ret = Reflect.get(targetObj, propName, receiverProxy);
        console.log("get("+propName.toString()+"="+ret+")");
        if (typeof ret === "function") { // ***
          ret = ret.bind(targetObj);     // ***
        }                                // ***
        return ret;
     },

     "set" : function(targetObj, propName, propValue, receiverProxy) {
         console.log("set("+propName.toString()+"="+propValue+")");
         return Reflect.set(targetObj, propName, propValue, receiverProxy);
     }
};

function onRunTest()
{
    let m1 = new Map();
    let p1 = new Proxy(m1, loggingProxyHandler);
    p1.set("a", "aval");
    console.log(p1.get("a")); // "aval"
}

onRunTest();
NOTE: Requires a browser supporting ES2015's Proxy

If your goal is just to intercept Map#get and Map#set, though, you don't need a proxy at all. Either:

  1. Create a Map subclass and instantiate that. Assumes you control the creation of the Map instance, though.

  2. Create a new object that inherits from the Map instance, and override get and set; you don't have to be in control of the original Map's creation.

  3. Replace the set and get methods on the Map instance with your own versions.

Here's #1:

class MyMap extends Map {
  set(...args) {
    console.log("set called");
    return super.set(...args);
  }
  get(...args) {
    console.log("get called");
    return super.get(...args);
  }
}

const m1 = new MyMap();
m1.set("a", "aval");
console.log(m1.get("a"));

#2:

const m1 = new Map();
const p1 = Object.create(m1, {
  set: {
    value: function(...args) {
      console.log("set called");
      return m1.set(...args);
    }
  },
  get: {
    value: function(...args) {
      console.log("get called");
      return m1.get(...args);
    }
  }
});

p1.set("a", "aval");
console.log(p1.get("a"));

#3:

const m1 = new Map();
const m1set = m1.set; // Yes, we know these are `Map.prototype.set` and
const m1get = m1.get; // `get`, but in the generic case, we don't necessarily
m1.set = function(...args) {
  console.log("set called");
  return m1set.apply(m1, args);
};
m1.get = function(...args) {
  console.log("get called");
  return m1get.apply(m1, args);
}

m1.set("a", "aval");
console.log(m1.get("a"));

  • It looks like I'll need to go with a subclass mechanism if I want to achieve some level of AOP here. But then access to the Map's size property is problematic because it's not achieved through a method call. When I added the recommended bind, it indeed got around the exception, however once the function is bound to the targetObj through the get trap, the set trap will not be called, effectively nullifying the Proxy. I suppose if I want to pursue the Proxy I could try to generate a completely new function, bound to the targetObject but calling the proxy handler trap (through a closure). – Rand Apr 5 '17 at 18:41
  • @Rand: Yup. There's no reason the set trap would be called, nothing is setting a property. I don't see why accessing size is problematic: Properties are inherited, just access it. – T.J. Crowder Apr 5 '17 at 20:00
  • @T.J.Crowder You say "I don't see why accessing size is problematic: Properties are inherited, just access it." I don't see why either, but it is. On Chrome 59, your first example works but if I add console.log(p1.size) it gives Uncaught TypeError: Method Map.prototype.size called on incompatible receiver [object Object]. Any ideas? Your example is the closest I've seen a Map proxy to working. – Don Hatch May 5 '17 at 12:31
  • Huh, apparently I can make the proxy fully functional by inserting if (name === 'size') { return targetObj.size; } before the call to Reflect.get() in your first example. No idea why, but this is great! I think it will solve another problem I'm working on: stackoverflow.com/questions/43801605 – Don Hatch May 5 '17 at 13:55

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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