Proxy and Reflect APIs are used to intercept and customize object operations. Proxy captures operations through traps (such as get and set). Reflect provides correct default behavior. The combination of the two can realize advanced functions such as verification, logging, and responsive systems. 1. Use Proxy to wrap the target object and define traps in handler; 2. Use corresponding Reflect methods in traps to ensure correctness; 3. Common uses include property verification, access logs and data binding; 4. Pay attention to performance overhead and some built-in object incompatibility issues; they are powerful tools for JavaScript metaprogramming, suitable for scenarios where object interactions need to be monitored or controlled.

JavaScript's Proxy and Reflect APIs are powerful tools that allow developers to intercept and customize fundamental object operations—like property access, assignment, and function invocation—at a low level. While not used every day in typical application code, they unlock advanced patterns for validation, data binding, logging, and even creating domain-specific APIs.

Let's take a practical deep dive into both APIs and see how they work together.

What is Proxy ?

A Proxy object wraps another object (called the target ) and allows you to intercept operations performed on it through traps . Think of it like a middleman that can observe, modify, or even block interactions with the target object.

Basic Syntax

 const proxy = new Proxy(target, handler);

• target : The original object to wrap.
• handler : An object defining which operations to intercept and how to handle them.
• traps : Methods in the handler (eg, get , set , has , apply ) that define custom behavior.

Example: Logging Property Access

 const user = { name: 'Alice', age: 30 };

const loggedUser = new Proxy(user, {
  get(target, property) {
    console.log(`Reading ${property}`);
    return target[property];
  },
  set(target, property, value) {
    console.log(`Setting ${property} to ${value}`);
    target[property] = value;
    return true; // Must return true if successful
  }
});

loggedUser.name; // Logs: Reading name
loggedUser.age = 31; // Logs: Setting age to 31

This is useful for debugging, reactive systems, or auditing object access.

Common Proxy Traps

Here are some of the most useful traps you can define:

• get(target, property, receiver) – Intercepts property reads.
• set(target, property, value, receiver) – Intercepts property writes.
• has(target, property) – Intercepts in operator checks.
• deleteProperty(target, property) – Intercepts delete operations.
• apply(target, thisArg, args) – For function calls (when target is a function).
• construct(target, args) – For new operator usage.
• ownKeys(target) – Intercepts Object.keys() , for...in , etc.
• getOwnPropertyDescriptor(target, property) – Intercepts Object.getOwnPropertyDescriptor .

Example: Validation with set Trap

 const validatedUser = new Proxy({}, {
  set(target, property, value) {
    if (property === 'age') {
      if (typeof value !== &#39;number&#39; || value < 0) {
        throw new Error(&#39;Age must be a positive number&#39;);
      }
    }
    if (property === &#39;name&#39;) {
      if (typeof value !== &#39;string&#39;) {
        throw new Error(&#39;Name must be a string&#39;);
      }
    }
    target[property] = value;
    return true;
  }
});

validatedUser.age = 25; // OK
validatedUser.name = &#39;Bob&#39;; // OK
// validatedUser.age = -5; // Throws error

This enables runtime validation without cluttering your business logic.

The Role of Reflect

The Reflect API is a set of methods that provide the same functionality as many Object methods, but in a more consistent, function-call style. More importantly, Reflect methods are designed to work with Proxy traps .

For every trap in Proxy , there's a corresponding Reflect method with the same name and signature.

Why Use Reflect in Proxies?

Without Reflect , you'd have to manually call default behavior using Object methods or property access, which can break edge cases (like this binding or inheritance). Reflect ensures correct default behavior.

Before: Manual Default Behavior (Problematic)

 const badProxy = new Proxy({}, {
  get(target, property) {
    console.log(`Accessing ${property}`);
    return target[property]; // Could break if getter uses `this`
  }
});

After: Using Reflect (Correct)

 const goodProxy = new Proxy({}, {
  get(target, property, receiver) {
    console.log(`Accessing ${property}`);
    return Reflect.get(target, property, receiver);
  }
});

The receiver argument ensures that if the target has getters/setters, they are called with the correct this context (ie, the proxy itself, not the target).

Practical Use Case: Observable Objects

You can use Proxy and Reflect to create a simple reactivity system:

 function makeObservable(target, callback) {
  return new Proxy(target, {
    set(target, property, value, receiver) {
      const oldValue = target[property];
      const result = Reflect.set(target, property, value, receiver);
      callback(property, oldValue, value);
      return result;
    }
  });
}

const state = makeObservable(
  { count: 0 },
  (key, oldVal, newVal) => {
    console.log(`${key} changed from ${oldVal} to ${newVal}`);
  }
);

state.count = 1; // Logs: count changed from 0 to 1
state.count = 2; // Logs: count changed from 1 to 2

This is the foundational idea behind reactivity in frameworks like Vue.js.

Gotchas and Limitations

• Not all objects can be perfectly proxied : Built-in objects like Date , Map , Set , or DOM elements may not work as expected because they rely on internal slots that can't be intercepted.
• Performance : Proxies add overhead. Avoid wrapping large or frequently accessed objects unless necessary.
• Debugging complexity : Proxies can make it harder to inspect objects in dev tools.
• Immutability isn't enforced : A proxy only controls access; the target can still be modified directly if someone has a reference to it.

Summary

• Proxy lets you intercept and customize object operations using traps.
• Reflect provides reliable, default implementations of those operations and should be used inside proxy handlers.
• Together, they enable powerful patterns: validation, logging, reactivity, and more.
• Use them judiciously—they're tools for special cases, not everyday object manipulation.

These APIs open doors to meta-programming in JavaScript, letting you shape how your objects behave in ways that were previously impossible. Once you understand the basics, you'll start seeing where they can simplify or enhance your code.

Basically, if you need to “observe” or “control” how an object is used, Proxy and Reflect are your go-to tools.

The above is the detailed content of A Deep Dive into JavaScript's `Proxy` and `Reflect` APIs. For more information, please follow other related articles on the PHP Chinese website!