编写wrapper工具函数：追踪各函数对props对象的键使用情况

Got it, let's tackle this problem. The main challenge here is tracking which props keys each function uses, and then tying that usage back to the function's name—something your initial Proxy approach was missing. Here's a complete implementation of the wrapper function that solves this:

function wrapper(...args) {
  // Separate the props object from the list of functions
  const props = args.pop();
  const functions = args;

  // Helper to format the usage message nicely
  const formatUsageMessage = (funcName, keys) => {
    if (keys.length === 0) {
      return `${funcName} is using no props`;
    }
    if (keys.length === 1) {
      return `${funcName} is using ${keys[0]}`;
    }
    if (keys.length === 2) {
      return `${funcName} is using ${keys[0]} and ${keys[1]}`;
    }
    // For 3+ keys: "keyA, keyB and keyC"
    return `${funcName} is using ${keys.slice(0, -1).join(', ')} and ${keys.at(-1)}`;
  };

  functions.forEach(func => {
    const accessedKeys = new Set();

    // Create a Proxy to track prop access
    const trackedProps = new Proxy(props, {
      get(target, key) {
        // Ignore internal/Symbol keys to avoid noise
        if (typeof key !== 'symbol' && !key.startsWith('__')) {
          accessedKeys.add(key);
        }
        // Return the actual value from props
        return Reflect.get(target, key);
      }
    });

    // Execute the function with our tracked props
    func(trackedProps);

    // Format and log the usage message
    const usageMessage = formatUsageMessage(func.name, [...accessedKeys]);
    console.log(usageMessage);
  });
}

How this works: #

1. Separate functions and props: We use args.pop() to grab the last parameter as the props object, leaving all previous parameters as the functions to execute.
2. Track access with Proxy: For each function, we create a Proxy around the original props. Every time a key is accessed, we add it to a Set (to avoid duplicate entries if a function accesses the same key multiple times).
3. Format clean messages: The formatUsageMessage helper handles different cases (no props, 1 prop, 2 props, 3+ props) to produce natural-sounding output.
4. Execute and log: We run the function with the tracked Proxy, then log the formatted usage message linking the function name to its used props.

Example usage: #

// Test functions
const funcA = (props) => {
  console.log(props.keyA, props.keyB);
};

const funcB = (props) => {
  console.log(props.keyC);
};

const funcC = () => {
  console.log("No props needed!");
};

// Test props
const testProps = { keyA: 'valueA', keyB: 'valueB', keyC: 'valueC' };

// Run wrapper
wrapper(funcA, funcB, funcC, testProps);

Output: #

valueA valueB
funcA is using keyA and keyB
valueC
funcB is using keyC
No props needed!
funcC is using no props

Notes: #

• This uses the function's name property, which works great for named functions like your funcA/funcB examples. If you're using anonymous functions, you might want to add an extra parameter to wrapper to pass custom names, or use function expressions with names (e.g., const myFunc = function customName() {}).
• We ignore Symbol keys and internal properties (like __proto__) to keep the usage logs focused on your actual props keys.

内容的提问来源于stack exchange，提问作者jeanpaul62