javascript - Determining if get handler in Proxy object is handling a function call - Stack Overflow

admin管理员组

文章数量:1324104

I currently have a Proxy object that I want to capture property calls to if the property is not defined. A basic version of my code would be something like this.

var a = new Proxy({}, {
    get: function(target, name, receiver) {
        if (target in name) {
            return target[name];
        } else {    
            function a() {
                return arguments;
            }
            var args = a();
            return [target, name, receiver, args];
        }
    }
});

Property calls to a here (i.e: a.b; a.c() etc) should return the target, name, receiver and arguments of the property call.

The problem I wish to solve, however, requires me to know whether the property call is for a property or a function, such that I can apply different treatments to each. Checking the length of the arguments object does not work, as calling a.c() would yield a length of 0 just like a.b, so it would be treated as a plain property and not a method.

Is there a way, therefore, to identify whether the property attempting to be accessed is being called as a function or not.

UPDATE: I should clarify, this method needs to work if the accessed property/method is undefined, as well as existing.

I currently have a Proxy object that I want to capture property calls to if the property is not defined. A basic version of my code would be something like this.

var a = new Proxy({}, {
    get: function(target, name, receiver) {
        if (target in name) {
            return target[name];
        } else {    
            function a() {
                return arguments;
            }
            var args = a();
            return [target, name, receiver, args];
        }
    }
});

Property calls to a here (i.e: a.b; a.c() etc) should return the target, name, receiver and arguments of the property call.

The problem I wish to solve, however, requires me to know whether the property call is for a property or a function, such that I can apply different treatments to each. Checking the length of the arguments object does not work, as calling a.c() would yield a length of 0 just like a.b, so it would be treated as a plain property and not a method.

Is there a way, therefore, to identify whether the property attempting to be accessed is being called as a function or not.

UPDATE: I should clarify, this method needs to work if the accessed property/method is undefined, as well as existing.

• javascript

Share Improve this question Follow edited Jun 8, 2017 at 18:31 dbr asked Jun 8, 2017 at 16:37 dbrdbr 68911 gold badge88 silver badges2222 bronze badges 1

• 2 No, the get handler only handles the a.b and a.c property access. It does not - and cannot - know whether the result of the access will be invoked. What exactly do you need this for? – Bergi Commented Jun 9, 2017 at 14:16

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

It's possible in a very hacky way. We return a function if the property is undefined. If this function is called, then we know the user was trying to call the property as a function. If it never is, it was called as a property. To check if the function was called, we take advantage of the fact that a Promise's callback is called in the next iteration of the event loop. This means that we won't know if it's a property or not until later, as the user needs a chance to call the function first (as our code is a getter).

One drawback of this method is that the value returned from the object will be the new function, not undefined, if the user was expecting a property. Also this won't work for you if you need the result right away and can't wait until the next event loop iteration.

const obj = {
  func: undefined,
  realFunc: () => "Real Func Called",
  prop: undefined,
  realProp: true
};

const handlers = {
  get: (target, name) => {
    const prop = target[name];
    if (prop != null) { return prop; }

    let isProp = true;
    Promise.resolve().then(() => {
      if (isProp) {
        console.log(`Undefined ${name} is Prop`)
      } else {
        console.log(`Undefined ${name} is Func`);
      }
    });
    return new Proxy(()=>{}, {
      get: handlers.get,
      apply: () => {
        isProp = false;
        return new Proxy(()=>{}, handlers);
      }
    });
  }
};

const proxied = new Proxy(obj, handlers);

let res = proxied.func();
res = proxied.func;
res = proxied.prop;
res = proxied.realFunc();
console.log(`realFunc: ${res}`);
res = proxied.realProp;
console.log(`realProp: ${res}`);
proxied.propC1.funcC2().propC3.funcC4().funcC5();

You can't know ahead of time whether it's a call expression or just a member expression, but you can deal with both situations simultaneously.

By returning a proxy targeting a deep clone of the original property that reflects all but two trap handlers to the original property, you can either chain or invoke each member expression.

The catch is that the proxy target also needs to be callable so that the handler.apply trap does not throw a TypeError:

function watch(value, name) {
  // create handler for proxy
  const handler = new Proxy({
    apply (target, thisArg, argsList) {
      // something was invoked, so return custom array
      return [value, name, receiver, argsList];
    },
    get (target, property) {
      // a property was accessed, so wrap it in a proxy if possible
      const {
        writable,
        configurable
      } = Object.getOwnPropertyDescriptor(target, property) || { configurable: true };
      return writable || configurable 
        ? watch(value === object ? value[property] : undefined, property)
        : target[property];
    }
  }, {
    get (handler, trap) {
      if (trap in handler) {
        return handler[trap];
      }
      // reflect intercepted traps as if operating on original value
      return (target, ...args) => Reflect[trap].call(handler, value, ...args);
    }
  });
  
  // coerce to object if value is primitive
  const object = Object(value);
  // create callable target without any own properties
  const target = () => {};
  delete target.length;
  delete target.name;
  // set target to deep clone of object
  Object.setPrototypeOf(
    Object.defineProperties(target, Object.getOwnPropertyDescriptors(object)),
    Object.getPrototypeOf(object)
  );
  // create proxy of target
  const receiver = new Proxy(target, handler);
  
  return receiver;
}

var a = watch({ b: { c: 'string' }, d: 5 }, 'a');

console.log(a('foo', 'bar'));
console.log(a.b());
console.log(a.b.c());
console.log(a.d('hello', 'world'));
console.log(a.f());
console.log(a.f.test());

Open Developer Tools to view Console.

The Stack Snippets Console attempts to stringify the receiver in a weird way that throws a TypeError, but in the native console and Node.js it works fine.

Try it online!

Would the typeof operator work for you?

For example:

if(typeof(a) === "function")
{
    ...
}
else
{
    ...
}

Some ideas I've e up with, which achieve a similar result at a small cost:

---

A

typeof(a.b) === "function" //`false`, don't call it.
typeof(a.c) === "function" //`true`, call it.

//Maybe you're not intending to try to call non-functions anyways?
a.c();

---

B

get: function(target, property) {
  //For this, it would have to already be set to a function.
  if (typeof(target[property] === "function") {
    
  }
}

---

C

a.b;
//Simply change the structuring a little bit for functions, e.g.:
a.func.c();
//Then, `func` would be set and handled as a special property.

本文标签： javascriptDetermining if get handler in Proxy object is handling a function callStack Overflow