Proxy 是 JavaScript 中用于拦截并自定义对象基本操作的构造函数，通过代理层实现数据劫持；支持 13 种 trap，如 get、set、has、deleteProperty、ownKeys 等；可天然监听动态属性、数组操作及嵌套对象，但需手动处理深层响应式与数组方法；相比 Object.defineProperty，Proxy 更强大灵活，但不兼容 IE。
Proxy 是 JavaScript 中用于拦截并自定义对象基本操作的构造函数，它不是直接修改对象本身，而是创建一个“代理层”，让所有对目标对象的访问都经过这个中间层——这正是实现数据劫持的核心机制。
Proxy 能拦截哪些操作？
Proxy 支持 13 种可拦截的操作（trap），常用包括：
- get：读取属性时触发，适合监听依赖收集（如 Vue 响应式）
- set：设置属性时触发，适合响应式更新、数据校验、自动转换
- has：in 操作符触发，可隐藏属性
- deleteProperty：delete 操作触发，控制删除权限
- ownKeys：Object.keys / for...in 触发，可过滤或添加枚举属性
用 Proxy 实现基础响应式数据劫持
与 Object.defineProperty 不同，Proxy 可以监听动态新增/删除属性、数组索引赋值、length 修改等，天然支持数组和嵌套对象。
简单示例：拦截 set/get，打印变化并触发更新函数：
立即学习“Java免费学习笔记（深入）”；
function reactive(obj, onUpdate) {
return new Proxy(obj, {
get(target, key, receiver) {
console.log(`读取 ${key}`);
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
console.log(`设置 ${key} =`, value);
const result = Reflect.set(target, key, value, receiver);
onUpdate && onUpdate(); // 触发视图更新
return result;
}
});
}
const state = reactive({ count: 0 }, () => console.log('视图需刷新'));
state.count++; // 输出：设置 count = 1 → 视图需刷新
注意深层响应式与陷阱
Proxy 默认只代理第一层。要实现嵌套对象响应式，需在 get 中递归代理：
- 每次 get 返回值是对象时，自动 wrap 一层 Proxy（避免重复代理，可用 WeakMap 缓存）
- set 时若新值是对象，也要递归 reactive 它
- 数组方法如 push/pop 会触发 set（如修改 length）或 ownKeys（影响 for...in），但不会触发 set(index)，需额外处理或重写数组方法
- Proxy 无法拦截普通函数调用、instanceof、typeof 等操作，这些需配合其他手段（如封装函数、使用 Reflect）
Proxy vs Object.defineProperty 的关键区别
- Proxy 代理整个对象，defineProperty 只能逐个属性定义
- Proxy 支持数组索引、length、新增属性的劫持；defineProperty 对数组索引无效，新增属性需重新 define
- Proxy 有更丰富的拦截能力（如 construct、apply），适合实现类、函数代理
- 兼容性：Proxy 不支持 IE，需考虑项目环境；defineProperty 兼容性更好（IE9+）
基本上就这些。Proxy 让数据劫持变得更自然、更彻底，现代响应式框架（Vue 3、SolidJS）都基于它构建核心响应系统。不复杂但容易忽略的是：它只是“拦截器”，真正驱动更新还需要依赖收集、副作用调度等配套设计。
