Understanding JavaScript's Proxy and Reflect APIs

Proxy and Reflect APIs are powerful tools used in JavaScript to intercept and customize object operations; 1. Proxy blocks operations such as get, set by wrapping target objects and defining "traps", and implements functions such as logs, verification, read-only control; 2. Reflect provides methods corresponding to Proxy traps to ensure the consistency and correctness of default behaviors and improve code maintainability; 3. Practical applications include Vue 3 responsive systems, data verification, debug logs, immutable objects and API simulation; 4. Pay attention to performance overhead, complex behavior of built-in objects, this binding problems, and nested objects need to be recursively proxyed; 5. Reasonable use can build an efficient, debugable, and reactive system, but excessive use should be avoided to make the code difficult to understand.

JavaScript's Proxy and Reflect APIs are powerful features introduced in ES6 that allows developers to intercept and customize fundamental object operations. While they might not be used every day, understanding them give you deeper control over object behavior and enables advanced patterns like validation, logging, and reactive programming.

What is the Proxy API?

A Proxy lets you create a wrapper around an object that can intercept and redefine basic operations like reading properties, writing values, or checking if a property exists. Think of it as a "gatekeeper" for an object.

Basic Syntax:

 const proxy = new Proxy(target, handler);

• target : The original object to wrap.
• handler : An object defining which operations to intercept (called "traps").

Example: Logging property access

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

const proxy = new Proxy(user, {
  get(target, property) {
    console.log(`Getting property: ${property}`);
    return target[property];
  },
  set(target, property, value) {
    console.log(`Setting property: ${property} = ${value}`);
    target[property] = value;
    return true; // Must return true for successful assignment
  }
});

proxy.name; // Logs: Getting property: name
proxy.age = 31; // Logs: Setting property: age = 31

This is useful for debugging, validation, or even building observables.

Common Proxy Traps

Here are some frequently used traps in the handler:

• get(target, property) – Intercepts property reads.
• set(target, property, value) – Intercepts property writes.
• has(target, property) – Intercepts in operator (eg, 'name' in obj ).
• deleteProperty(target, property) – Intercepts delete obj.prop .
• apply(target, thisArg, args) – Used for wrapping functions.
• construct(target, args) – Intercepts new operator.

Example: Validation with set trap

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

validatedUser.name = 'Bob'; // OK
validatedUser.age = 'thirty'; // Throws TypeError

This allows you to enforce data integrity at the object level.

What is the Reflect API?

Reflect is a built-in object that provides methods for intercepting JavaScript operations. It's designed to work hand-in-hand with Proxy . For every proxy trap, there's a corresponding Reflect method.

Instead of manually accessing target[property] in a get trap, use Reflect.get() — it keeps the default behavior consistent and handles edge cases.

Why use Reflect?

• Keeps code clean and predictable.
• Handles this binding correctly.
• Provides a functional way to perform object operations.

Improved Proxy using Reflect:

 const safeObject = new Proxy({ value: 42 }, {
  get(target, property) {
    console.log(`Accessing: ${property}`);
    return Reflect.get(target, property);
  },
  set(target, property, value) {
    console.log(`Mutating: ${property}`);
    return Reflect.set(target, property, value);
  }
});

Using Reflect ensures that your proxy respects JavaScript's default behavior unless explicitly overridden.

Practical Use Cases

These APIs aren't just academic — they're used in real tools and frameworks:

• Vue 3's Reactivity System : Uses Proxy to detect property access and updates, replacing Object.defineProperty .
• Validation Libraries : Wrap objects to enforce type or range checks.
• Debugging & Logging : Monitor object interactions without modifying the original code.
• Immutable Wrappers : Prevent accidental mutations by throwing errors in set traps.
• API Mocking : Simulate objects with dynamic responses.

Example: Read-only proxy

 function readOnly(target) {
  return new Proxy(target, {
    set() {
      throw new Error("Cannot modify a read-only object");
    },
    deleteProperty() {
      throw new Error("Cannot delete from a read-only object");
    }
  });
}

const config = readOnly({ api: 'https://api.example.com' });
config.api = 'hacked'; // Throws error

Gotchas and Best Practices

• Performance : Proxies add overhead. Don't wrap large objects unless necessary.
• Not all objects can be proxied equally : Built-in objects like arrays have nuanced behaviors.
• Use Reflect consistently : It makes your traps more reliable and easier to maintain.
• Proxies only wrap the outer object : Nested objects aren't automatically protected unless you recursively proxy them.

Final Thoughts

Proxy and Reflect open up meta-programming capabilities in JavaScript. While overuse can make code harder to follow, they're invaluable for building clean abstractions, debugging tools, and reactive systems.

Used wisely, they let you write code that's both powerful and expressive.

Basically, if you need to observe, control, or enhance how objects behave — Proxy and Reflect are the tools to reach for.

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