JavaScript中的代理（Proxy）和反射（Reflect）有哪些高级用法？

Proxy和Reflect可用于实现响应式系统、只读代理、AOP切面编程、属性访问控制及自动初始化对象。1. Vue 3利用Proxy监听属性增删与数组变化，结合Reflect追踪依赖并触发更新；2. 通过拦截set/deleteProperty创建深度只读视图防止状态篡改；3. 使用apply陷阱封装函数调用，实现性能监控等横切逻辑；4. 拦截has/get实现安全对象，限制属性访问权限；5. 利用get陷阱自动创建嵌套对象结构或返回默认值，避免undefined错误。二者配合可提升代码灵活性与可维护性，适用于框架与工具开发。

JavaScript的Proxy和Reflect提供了元编程能力，让开发者可以拦截并自定义对象的基本操作。除了基础的数据校验或日志记录，它们在实际开发中还有不少高级用法，能显著提升代码的灵活性和可维护性。

1. 实现响应式系统（如Vue 3的核心机制）

Proxy是现代前端框架实现响应式的关键技术。相比Object.defineProperty，它能监听动态添加的属性、数组索引变化以及in、delete等操作。

结合Reflect确保原始行为被正确执行，同时触发依赖收集或更新通知。

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver);
      // 收集依赖（如添加到Dep中）
      console.log(`访问属性: ${String(key)}`);
      return typeof result === 'object' && result !== null ? reactive(result) : result;
    },
    set(target, key, value, receiver) {
      const oldVal = target[key];
      const result = Reflect.set(target, key, value, receiver);
      // 触发更新
      console.log(`更新属性 ${String(key)}: ${oldVal} -> ${value}`);
      return result;
    }
  });
}

const state = reactive({ count: 0 });
state.count++; // 访问属性: count → 更新属性 count: 0 -> 1

2. 创建只读或深度只读代理

通过拦截所有可变操作（如set、deleteProperty），可以创建不可变对象视图，常用于防止状态意外修改。

立即学习“Java免费学习笔记（深入）”；

WPS AI

金山办公发布的AI办公应用，提供智能文档写作、阅读理解和问答、智能人机交互的能力。

下载

function readOnly(obj) {
  return new Proxy(obj, {
    set(target, key) {
      throw new Error(`Cannot assign to read-only property '${String(key)}'`);
    },
    deleteProperty(target, key) {
      throw new Error(`Cannot delete read-only property '${String(key)}'`);
    },
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver);
      // 深度代理嵌套对象
      return typeof result === 'object' && result !== null ? readOnly(result) : result;
    }
  });
}

3. 方法调用拦截与AOP（面向切面编程）

利用apply陷阱可以拦截函数调用，实现日志、性能监控、权限检查等横切逻辑。

function withTiming(fn) {
  return new Proxy(fn, {
    apply(target, thisArg, args) {
      console.time(`${target.name || 'Function'} execution`);
      const result = Reflect.apply(target, thisArg, args);
      console.timeEnd(`${target.name || 'Function'} execution`);
      return result;
    }
  });
}

const heavyTask = withTiming(function() {
  let sum = 0;
  for (let i = 0; i < 1e7; i++) sum += i;
});
heavyTask(); // 输出执行时间

4. 实现私有属性与访问控制

虽然ES2022支持私有字段（#），但Proxy仍可用于运行时访问控制，比如根据上下文限制属性访问。

function createSecureObject(obj, allowedKeys = []) {
  return new Proxy(obj, {
    has(target, key) {
      return allowedKeys.includes(key) ? Reflect.has(target, key) : false;
    },
    ownKeys(target) {
      return allowedKeys.filter(key => Reflect.has(target, key));
    },
    get(target, key, receiver) {
      if (!allowedKeys.includes(key)) {
        throw new Error(`Access denied to property '${String(key)}'`);
      }
      return Reflect.get(target, key, receiver);
    }
  });
}

const user = createSecureObject(
  { name: 'Alice', ssn: '123-45-6789', role: 'admin' },
  ['name', 'role']
);

console.log(user.name); // 正常输出
// console.log(user.ssn); // 抛出错误

5. 自动对象初始化与默认值填充

使用get陷阱可以自动创建嵌套结构或返回默认值，避免undefined错误。

function autoInit() {
  return new Proxy({}, {
    get(target, key) {
      if (!(key in target)) {
        target[key] = autoInit(); // 惰性创建子对象
      }
      return target[key];
    }
  });
}

const nested = autoInit();
nested.a.b.c.d = 42;
console.log(nested.a.b.c.d); // 42，路径自动创建