javascript - 获取函数使用的对象的键

Question

假设我有一个 props 对象，它包含多个键 keyA、keyB...

我有 3 个函数 funcA、funcB 和 funcC，每个函数都有一个参数，即 props。但是，每个函数将使用它们的 props 参数的零个、一个或多个键/值，我想知道每个函数使用了哪些键。

例如:

const funcA = props => {/* do something with props.keyA and props.keyB */}

const funcB = props => {/* do something with props.keyC */}

const funcC = props => {/* do nothing with props */}

我希望有一种机制(即包装函数或包装类...)，当 func{A,B,C} 被调用时，将 console.log调用函数的键:

// I wish to have the following lines console.logged:
funcA is using keyA and keyB
funcB is using keyC
funcC is not using anything

我的第一步是在 props 对象上创建一个 Proxy，方法如下:

const propsProxy = new Proxy(props, {
  get (target, key) {
    console.log(`${key} has been used.`);
    return target[key];
  }
}

// ...

funcA(propsProxy); // Logs "keyA has been used. keyB has been used."
funcB(propsProxy); // Logs "keyC has been used."
funcC(propsProxy);

但后来我也陷入了如何记录函数名称的问题。

编辑:在阅读了一些评论后，看来我需要添加一些说明。让我们让它更实用。

我实际上正在编写这个库，我们称它为 wrapper，最终开发人员会像这样使用它:

import wrapper from 'wrapper';

// User defines funcA=..., funcB=..., funcC=... and props

wrapper(funcA, funcB, funcC, props); // Will call funcA(props), funcB(props) and funcC(props)
// Should log:
// funcA is using keyA and keyB
// funcB is using keyC
// funcC is not using anything

问题:请编写wrapper的代码？

Answer 1

你可以像这样定义wrapper:

function wrapper(props, ...funcs) {
  funcs.forEach(function(func) {                                       // for each function func passed as argument
    var used = [];                                                     // this will be the array of used property names (duplicates included)

    var propsProxy = new Proxy(props, {                                // set up a new proxy of props
      get(target, key) {
        used.push(key);                                                // ... which add the key used to used array
        return target[key];
      }
    });

    func(propsProxy);                                                  // call func with the proxy object

    console.log(func.name + " used " + (used.length? used.join(" and "): "nothing")); // log the results
  });
}

示例:

function funcA(props) {
  var result = props.propA + props.propC;
}

function funcB(props) {
  if(props.propA) {
    return true;
  }
}

function funcC(props) {
}

function wrapper(props, ...funcs) {
  funcs.forEach(function(func) {
    var used = [];

    var propsProxy = new Proxy(props, {
      get(target, key) {
        used.push(key);
        return target[key];
      }
    });

    func(propsProxy);
    
    console.log(func.name + " used " + (used.length? used.join(" and "): "nothing"));
  });
}

wrapper({
  propA: 5,
  propB: 6,
  propC: 7
}, funcA, funcB, funcC);