JS Proxy与解构赋值兼容问题：能否通过解构调用Proxy getter？

Absolutely—you can combine JavaScript destructuring syntax with Proxy, and it should work perfectly if your Proxy is set up correctly. Let me break down why your test might have failed, and how to get this working as expected.

First, a quick reminder: when you use object destructuring like const { value } = myProxy, JavaScript is essentially just accessing the value property of myProxy—exactly the same as writing const value = myProxy.value. That means it will trigger your Proxy's get trap just like any direct property access would.

Here’s a working example to demonstrate this:

// Define a basic target object
const target = { value: "Hello from the Proxy!" };

// Set up your Proxy with a get trap that logs activity
const myProxy = new Proxy(target, {
  get(target, prop) {
    console.log(`Proxy get trap triggered for property: ${prop}`);
    return target[prop];
  }
});

// Use destructuring to extract the value
const { value } = myProxy;

// Check the result
console.log(value); 
// Output: "Hello from the Proxy!"
// You’ll also see the console log from the get trap fire

Why might your test have failed? #

If your destructuring didn’t behave as expected, these are the most common reasons:

• The target object lacks the value property: If target.value doesn’t exist, your Proxy’s get trap needs to handle this (return a default value, throw an error, etc.)—otherwise you’ll get undefined from destructuring.
• The property is non-enumerable: By default, destructuring only picks up enumerable properties. If your value property was defined with enumerable: false, you can adjust your Proxy using the getOwnPropertyDescriptor trap to make the property appear enumerable to destructuring:

  const target = {};
  // Define a hidden, non-enumerable property
  Object.defineProperty(target, 'value', {
    value: "Hidden secret",
    enumerable: false
  });
  
  const myProxy = new Proxy(target, {
    get(target, prop) {
      return target[prop];
    },
    getOwnPropertyDescriptor(target, prop) {
      return {
        value: target[prop],
        enumerable: true, // Force enumerability for destructuring
        configurable: true
      };
    }
  });
  
  const { value } = myProxy;
  console.log(value); // Output: "Hidden secret"
  

• Your Proxy’s get trap has a bug: Double-check that your trap actually returns a value for the requested property. Forgetting the return statement will result in undefined from destructuring.

To sum up: destructuring and Proxy work seamlessly together—every property access in destructuring triggers the Proxy’s get trap, just like direct property access. The issue is almost certainly in how your Proxy or target object was configured, not the combination of the two features.

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