JavaScript 中的代理（Proxy）是什么？有哪些用途？

代理（Proxy）是 JavaScript 中 ES6 引入的一个内置对象，用于创建一个对象的代理，从而拦截并自定义该对象的基本操作（如属性访问、赋值、函数调用等）。它通过一个处理器（handler）对象定义拦截行为，提供强大的元编程能力。

Proxy 的基本概念

• 定义：Proxy 接受两个参数：目标对象（target）和处理器对象（handler）。处理器包含各种捕获器（traps），如 get、set、apply 等，用于拦截对应操作。
• 语法：

  const proxy = new Proxy(target, handler);
  

  其中：

  • target 是被代理的原始对象。
  • handler 是一个包含捕获器的对象，例如 get 用于拦截属性读取。

Proxy 的主要用途

Proxy 在 JavaScript 开发中有广泛的应用场景，包括但不限于：

1. 数据验证
   拦截属性设置（set trap）来验证输入值，确保数据有效性。

   const validator = {
     set: function(obj, prop, value) {
       if (prop === 'age' && typeof value !== 'number') {
         throw new TypeError('Age must be a number');
       }
       obj[prop] = value;
       return true;
     }
   };
   const person = new Proxy({}, validator);
   person.age = 30; // 正常
   person.age = 'thirty'; // 抛出错误
   

2. 日志记录与调试
   记录对象操作（如属性读取或方法调用），用于监控或调试。

   const logger = {
     get: function(obj, prop) {
       console.log(`Accessing property: ${prop}`);
       return obj[prop];
     }
   };
   const obj = { name: 'Alice' };
   const proxy = new Proxy(obj, logger);
   proxy.name; // 控制台输出: Accessing property: name
   

3. 访问控制与安全
   限制对敏感属性的访问（get 或 set trap），实现私有属性或权限控制。

   const secureHandler = {
     get: function(obj, prop) {
       if (prop.startsWith('_')) {
         throw new Error('Cannot access private property');
       }
       return obj[prop];
     }
   };
   const data = { _secret: 'hidden', public: 'visible' };
   const secureProxy = new Proxy(data, secureHandler);
   secureProxy.public; // 返回 'visible'
   secureProxy._secret; // 抛出错误
   

4. 性能优化与懒加载
   创建虚拟属性或延迟加载资源，减少初始开销。

   const lazyLoader = {
     get: function(obj, prop) {
       if (prop === 'data' && !obj.data) {
         obj.data = fetchData(); // 模拟懒加载
       }
       return obj[prop];
     }
   };
   const proxy = new Proxy({}, lazyLoader);
   console.log(proxy.data); // 首次访问时加载数据
   

5. 响应式编程
   在框架中（如 Vue 3）用于实现数据绑定，自动触发更新。

   const reactiveHandler = {
     set: function(obj, prop, value) {
       obj[prop] = value;
       console.log(`Property ${prop} updated`); // 模拟响应式更新
       return true;
     }
   };
   const state = new Proxy({ count: 0 }, reactiveHandler);
   state.count = 1; // 输出: Property count updated
   

6. 函数调用拦截
   通过 apply trap 拦截函数调用，用于 AOP（面向切面编程）。

   const handler = {
     apply: function(target, thisArg, argumentsList) {
       console.log(`Function called with args: ${argumentsList}`);
       return target.apply(thisArg, argumentsList);
     }
   };
   function sum(a, b) { return a + b; }
   const proxySum = new Proxy(sum, handler);
   proxySum(2, 3); // 输出: Function called with args: 2,3
   

Proxy 的优势在于其灵活性，但需注意性能开销，避免在性能关键路径中过度使用。