JavaScript中的Proxy和Reflect

以下是关于 JavaScript 中 Proxy 和 Reflect 的全面梳理，涵盖核心概念、使用场景、进阶技巧及注意事项，帮助我们深入掌握这两大元编程利器。

---

一、Proxy 基础

1. 核心概念

• Proxy 是对象的包装器，允许拦截并自定义对象的底层操作（如属性读取、赋值、函数调用等）。
• 核心三要素：

  const proxy = new Proxy(target, handler);
  

  • target：被代理的目标对象。
  • handler：定义拦截行为的处理器对象（包含 get、set 等方法）。
  • proxy：生成的代理对象，操作代理对象会触发处理器逻辑。

2. 常用拦截操作

处理器方法	触发场景	示例用途
get(target, prop)	读取属性（proxy.prop）	懒加载、访问控制
set(target, prop, value)	设置属性（proxy.prop = value）	数据验证、自动更新
apply(target, thisArg, args)	函数调用（proxy(...args)）	函数调用日志、参数校验
construct(target, args)	new proxy(...args) 构造实例	单例模式、构造函数拦截
has(target, prop)	prop in proxy 操作	隐藏属性

3. 基础示例

const target = {
    name: "Alice" };
const handler = {
   
  get(target, prop) {
   
    return prop === 'age' ? 25 : target[prop]; // 拦截读取，伪造 age 属性
  }
};
const proxy = new Proxy(target, handler);

console.log(proxy.name); // "Alice"
console.log(proxy.age);  // 25

---

二、Reflect 基础

1. 核心概念

• Reflect 是内置对象，提供与 Proxy 处理器方法一一对应的静态方法，用于简化对象操作。
• 设计目标：
  • 将对象的内部方法（如 [[Get]]、[[Set]]）暴露为 API。
  • 替代 Object 的某些方法（如 Reflect.get() vs Object.prototype.valueOf）。

2. 常用方法

Reflect 方法	等效操作
Reflect.get(obj, prop)	obj[prop]
Reflect.set(obj, prop, value)	obj[prop] = value
Reflect.has(obj, prop)	prop in obj
Reflect.construct(func, args)	new func(...args)

3. 基础示例

const obj = {
    a: 1 };
console.log(Reflect.get(obj, 'a')