Proxy 是 JavaScript 中用于拦截和自定义对象基本操作的构造器，通过目标对象和处理器对象（含 get、set 等 trap）实现读写、枚举、删除等操作的代理控制，比 Object.defineProperty 更通用强大。
Proxy 是 JavaScript 中用于拦截和自定义对象基本操作的构造器。它不修改原对象，而是创建一个“代理层”，让开发者能在读取、赋值、删除、遍历等关键操作发生时插入逻辑，比如验证、日志、响应式更新或权限控制。
Proxy 的基本结构
创建 Proxy 需要两个参数：目标对象（target）和处理器对象（handler）。handler 是一个配置对象，它的方法（称为“陷阱”trap）对应各种操作。只要目标对象被代理后使用，对应 trap 就会被触发。
示例：
const obj = { count: 1 };const proxy = new Proxy(obj, {
get(target, key) {
console.log(`读取 ${key}`);
return target[key];
},
set(target, key, value) {
console.log(`设置 ${key} = ${value}`);
target[key] = value;
return true;
}
});
proxy.count; // 输出：读取 count
proxy.count = 5; // 输出：设置 count = 5
常用拦截操作（Trap）及用途
以下是最常使用的几个 trap，每个都对应一种语言行为：
立即学习“Java免费学习笔记（深入）”；
-
get(target, prop, receiver)：拦截属性读取（如
obj.x、obj['x']），适合实现默认值、链式调用、响应式依赖收集。 -
set(target, prop, value, receiver)：拦截属性赋值（如
obj.x = 1），可用于数据校验、自动转换、触发更新。 -
has(target, prop)：拦截
prop in obj，可隐藏属性或模拟稀疏数组。 -
ownKeys(target)：拦截
Object.keys()、for...in等枚举操作，能控制哪些键可见（例如过滤私有属性）。 -
deleteProperty(target, prop)：拦截
delete obj.x，可用于禁止删除或记录删除行为。
Proxy 与 Object.defineProperty 的区别
两者都能做属性拦截，但 Proxy 更强大、更通用：
- 作用范围不同：Object.defineProperty 只能监听已存在的属性，且对数组索引、新增属性无效；Proxy 拦截整个对象，支持动态添加/删除属性、数组方法（如 push）、甚至 for...in 和 JSON.stringify（通过 ownKeys + getOwnPropertyDescriptor 配合）。
-
不可撤销性：Proxy 默认无法撤销（除非用
Proxy.revocable()创建可撤销代理），而 defineProperty 是直接改写对象描述符，效果永久。 - 性能考虑：Proxy 有一定运行时开销，不适合高频、深层嵌套的小对象；defineProperty 在初始化阶段开销大，但后续访问更快。
实际应用小提示
Proxy 常用于现代框架底层（如 Vue 3 的响应式系统），日常开发中也可快速落地：
- 构建带日志或调试信息的对象：所有读写都打点，方便排查问题。
- 实现只读视图：在 set / deleteProperty / defineProperty 等 trap 中抛错或静默忽略。
- 做数据格式适配层：比如把传入的字符串数字自动转为 number，或统一处理日期字段。
- 配合 Reflect API 使用更安全：推荐在 trap 中用
Reflect.get()替代target[prop]，它能正确处理 this 绑定和原型链查找。
