JavaScript 中的 Proxy

一、什么是 Proxy

1.1 核心概念

Proxy（代理）是 ES6 引入的元编程（Metaprogramming）特性，它允许开发者创建一个对象的代理（Proxy Object），通过这个代理对象可以拦截并重新定义 JavaScript 引擎的底层操作。这种机制实现了：

• 操作拦截：拦截对目标对象的 13 种基本操作
• 行为定制：自定义对象的基础行为（如属性访问、赋值、枚举等）
• 透明代理：不影响原始对象的正常使用

1.2 核心组成

• Target（目标对象）：被代理的原始对象
• Handler（处理器对象）：定义拦截行为的对象
• Trap（陷阱方法）：处理器对象中定义拦截操作的方法

1.3 设计哲学

• 非侵入式编程：不修改原始对象实现功能增强
• 元编程能力：直接操作语言底层行为
• 反射式设计：与 Reflect API 完美配合

二、与 Object.defineProperty 对比

2.1 功能对比

特性	Proxy	Object.defineProperty
拦截范围	13 种基本操作	仅限于属性读写
数组处理	自动感知索引变化	需要特殊处理索引属性
新属性检测	自动拦截	需要预先定义属性
性能表现	首次调用稍慢，但整体更灵活	初始化更快但扩展性差
作用域	对象级别代理	属性级别操作
原型操作	可拦截原型相关操作	无法拦截原型操作

2.2 性能差异原理

• Proxy：运行时动态拦截，V8 引擎使用隐藏类优化
• defineProperty：静态属性定义，修改对象隐藏类结构

2.3 典型场景选择

• 选择 Proxy：需要拦截多种操作、处理动态属性、数组操作
• 选择 defineProperty：只需要简单属性劫持、性能敏感场景

三、Proxy 基本语法

3.1 构造函数

const proxy = new Proxy(target, handler)

3.2 参数详解

• target：被代理的目标对象（可以是任何类型的对象）
• handler：处理器对象（包含 trap 方法的配置对象）

3.3 基础示例

const target = { name: 'Alice' };
const handler = {
    get(target, prop) {
        return prop in target ? target[prop] : 'DEFAULT';
    }
};

const proxy = new Proxy(target, handler);
console.log(proxy.age); // 输出 'DEFAULT'

3.4 注意事项

• 必须通过代理对象操作才能触发拦截
• 原始对象被代理后仍然可以被直接操作
• 处理器对象必须包含至少一个陷阱方法

四、Handler 陷阱方法详解

4.1 原型相关陷阱

1. getPrototypeOf

拦截 Object.getPrototypeOf() 操作

{
  getPrototypeOf(target) {
    console.log('Prototype accessed');
    return Reflect.getPrototypeOf(target);
  }
}

2. setPrototypeOf

拦截 Object.setPrototypeOf() 操作

{
  setPrototypeOf(target, proto) {
    if (proto === null) throw new Error('Cannot set null prototype');
    return Reflect.setPrototypeOf(target, proto);
  }
}

4.2 对象扩展性

3. isExtensible

拦截 Object.isExtensible()

{
  isExtensible(target) {
    return false; // 始终返回不可扩展
  }
}

4. preventExtensions

拦截 Object.preventExtensions()

{
  preventExtensions(target) {
    console.log('Extensions prevented');
    return Reflect.preventExtensions(target);
  }
}

4.3 属性描述符

5. getOwnPropertyDescriptor

拦截 Object.getOwnPropertyDescriptor()

{
  getOwnPropertyDescriptor(target, prop) {
    return {
      value: target[prop],
      writable: true,
      enumerable: true,
      configurable: true
    };
  }
}

6. defineProperty

拦截 Object.defineProperty()

{
  defineProperty(target, prop, descriptor) {
    if (prop.startsWith('_')) throw new Error('Cannot define private property');
    return Reflect.defineProperty(...arguments);
  }
}

4.4 存在性检查

7. has

拦截 in 操作符

{
  has(target, prop) {
    return prop in target || prop === 'virtualProp';
  }
}

4.5 核心访问器

8. get

拦截属性读取

{
  get(target, prop, receiver) {
    const value = Reflect.get(...arguments);
    return typeof value === 'function' ? value.bind(target) : value;
  }
}

9. set

拦截属性赋值

{
  set(target, prop, value, receiver) {
    if (prop === 'age' && value < 0) {
      throw new Error('Age cannot be negative');
    }
    return Reflect.set(...arguments);
  }
}

4.6 属性操作

10. deleteProperty

拦截 delete 操作符

{
  deleteProperty(target, prop) {
    if (prop === 'required') return false;
    return Reflect.deleteProperty(...arguments);
  }
}

11. ownKeys

拦截 Object.keys() 等操作

{
  ownKeys(target) {
    return Reflect.ownKeys(target).filter(key => !key.startsWith('_'));
  }
}

4.7 函数操作

12. apply

拦截函数调用

{
  apply(target, thisArg, argumentsList) {
    console.log(`Function called with ${argumentsList}`);
    return target.apply(thisArg, argumentsList);
  }
}

13. construct

拦截 new 操作符

{
  construct(target, argumentsList, newTarget) {
    if (argumentsList.length === 0) throw new Error('Need arguments');
    return Reflect.construct(...arguments);
  }
}

五、Proxy 常见使用场景

5.1 数据绑定与响应式系统

const reactive = (obj) => new Proxy(obj, {
  get(target, prop) {
    track(target, prop); // 依赖收集
    return Reflect.get(...arguments);
  },
  set(target, prop, value) {
    Reflect.set(...arguments);
    trigger(target, prop); // 触发更新
    return true;
  }
});

5.2 表单验证引擎

class Validator {
  constructor(rules) {
    return new Proxy(this, {
      set(target, prop, value) {
        const rule = rules[prop];
        if (rule && !rule.validate(value)) {
          throw new Error(rule.message);
        }
        return Reflect.set(...arguments);
      }
    });
  }
}

5.3 API 网关代理

const createAPIProxy = baseURL => new Proxy({}, {
  get(target, endpoint) {
    return params => fetch(`${baseURL}/${endpoint}?${new URLSearchParams(params)}`);
  }
});

const api = createAPIProxy('https://api.example.com');
api.users({ page: 2 }); // GET https://api.example.com/users?page=2

5.4 日志记录系统

const withLogging = obj => new Proxy(obj, {
  get(target, prop) {
    const value = Reflect.get(...arguments);
    console.log(`GET ${prop}`, value);
    return value;
  },
  set(target, prop, value) {
    console.log(`SET ${prop} =`, value);
    return Reflect.set(...arguments);
  }
});

5.5 权限控制系统

const createProtectedObject = (obj, permissions) => new Proxy(obj, {
  get(target, prop) {
    if (permissions.read.includes(prop)) {
      return Reflect.get(...arguments);
    }
    throw new Error('No read permission');
  },
  set(target, prop, value) {
    if (permissions.write.includes(prop)) {
      return Reflect.set(...arguments);
    }
    throw new Error('No write permission');
  }
});

5.6 缓存代理模式

const createCacheProxy = fn => {
  const cache = new Map();
  return new Proxy(fn, {
    apply(target, thisArg, args) {
      const key = JSON.stringify(args);
      if (cache.has(key)) return cache.get(key);
      const result = Reflect.apply(...arguments);
      cache.set(key, result);
      return result;
    }
  });
};

5.7 数据格式化

const createFormatter = obj => new Proxy(obj, {
  get(target, prop) {
    const value = Reflect.get(...arguments);
    switch (typeof value) {
      case 'number': return value.toLocaleString();
      case 'Date': return value.toISOString();
      default: return value;
    }
  }
});

六、高级技巧与最佳实践

6.1 链式代理

const withValidation = handler => ({
  get(target, prop) {
    const value = Reflect.get(...arguments);
    if (typeof value === 'object' && value !== null) {
      return new Proxy(value, handler);
    }
    return value;
  }
});

const proxy = new Proxy({}, withValidation({
  set(target, prop, value) {
    // 嵌套对象属性验证逻辑
  }
}));

6.2 可撤销代理

const { proxy, revoke } = Proxy.revocable({}, {
  get() {
    console.log('Accessed');
    return Reflect.get(...arguments);
  }
});

revoke(); // 后续操作会抛出 TypeError

6.3 性能优化策略

• 使用 WeakMap 缓存代理对象
• 避免在热路径中进行复杂计算
• 优先使用简单陷阱方法
• 合理使用 Reflect 保持默认行为

6.4 调试技巧

const debugProxy = obj => new Proxy(obj, {
  get(target, prop) {
    console.trace(`Accessing ${prop}`);
    return Reflect.get(...arguments);
  }
});

七、浏览器兼容性与工程化

7.1 兼容性处理

• 现代浏览器：Chrome 49+、Firefox 18+、Safari 10+ 支持
• Babel 转译：使用 @babel/plugin-proxy 进行降级处理
• Polyfill：通过 core-js 实现旧环境支持

7.2 TypeScript 支持

interface ProxyHandler<T extends object> {
  get? (target: T, p: PropertyKey, receiver: any): any;
  set? (target: T, p: PropertyKey, value: any, receiver: any): boolean;
  // ...其他陷阱方法
}

const proxy = new Proxy<MyInterface>(target, handler);

7.3 单元测试策略

• 测试代理对象的拦截行为
• 验证默认行为的正确性
• 检查内存泄漏问题
• 性能基准测试

八、总结与展望

8.1 核心优势

• 元编程能力：突破 JavaScript 的限制
• 非侵入式扩展：保持代码的整洁性
• 灵活的行为控制：实现各种设计模式

8.2 未来趋势

• 与 WebAssembly 结合实现更高效的代理
• 在微前端架构中的应用
• 服务端渲染中的状态管理
• 浏览器插件开发的安全沙箱

8.3 学习路径建议

1. 掌握 13 种陷阱方法的原理
2. 熟悉 Reflect API 的配合使用
3. 实践常见设计模式的代理实现
4. 研究主流框架中的 Proxy 应用
5. 深入引擎层面的实现原理

通过系统性地掌握 Proxy 技术，开发者可以显著提升代码的抽象能力和架构设计水平，为构建复杂应用打下坚实基础。