Proxy和Reflect API用於攔截和自定義對(duì)像操作，Proxy通過(guò)陷阱（如get、set）捕獲操作，Reflect提供正確默認(rèn)行為，二者結(jié)合可實(shí)現(xiàn)驗(yàn)證、日誌、響應(yīng)式系統(tǒng)等高級(jí)功能，1. 使用Proxy包裝目標(biāo)對(duì)象並定義handler中的陷阱；2. 在陷阱中使用對(duì)應(yīng)Reflect方法確保正確性；3. 常見(jiàn)用途包括屬性驗(yàn)證、訪問(wèn)日誌和數(shù)據(jù)綁定；4. 注意性能開(kāi)銷及部分內(nèi)置對(duì)像不兼容問(wèn)題；它們是JavaScript元編程的強(qiáng)大工具，適用於需要監(jiān)控或控制對(duì)象交互的場(chǎng)景。

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.

以上是深入了解JavaScript的'代理”和'反射” API的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！