JavaScript需要Proxy，是因为它提供了唯一原生、细粒度、可编程的方式拦截和自定义对象基本操作；而Object.defineProperty仅能静态劫持已存在属性，无法捕获新增/删除属性、in操作、数组索引访问等。
JavaScript 需要 Proxy，是因为它提供了**唯一原生、细粒度、可编程的方式去拦截和自定义对象的基本操作**（比如读取属性、赋值、枚举、函数调用等）。没有 Proxy，你无法真正“监听”或“改写”这些底层行为——Object.defineProperty 只能劫持已存在的属性，且无法捕获新增/删除属性、in 操作、for...in 遍历等；而 defineProperty 也无法代理数组索引访问或内置方法调用。
Proxy 能拦截哪些关键操作
Proxy 通过一个“陷阱”（trap）机制，在目标对象被访问时插入自定义逻辑。常用且实用的拦截包括：
- get(target, prop, receiver)：读取属性时触发，可用于实现响应式依赖收集、默认值、链式调用兜底
- set(target, prop, value, receiver)：设置属性时触发，适合数据校验、变更通知、不可变约束
-
has(target, prop)：拦截
prop in obj，可隐藏属性或模拟稀疏结构 -
ownKeys(target)：拦截
Object.keys()、for...in、Reflect.ownKeys()，控制属性可见性 - apply(target, thisArg, args)：拦截函数调用，用于日志、重试、参数预处理
-
construct(target, args, newTarget)：拦截
new操作，实现类代理或构造逻辑增强
它不是“包装”，而是“行为重定义”
Proxy 不复制目标对象，也不修改原对象。它返回一个新对象（代理对象），所有操作都先经过你定义的 trap 函数，再转发给目标（或完全替代）。你可以选择放行、改写、拒绝，甚至返回完全不同类型的值。
例如：
立即学习“Java免费学习笔记（深入）”；
const target = { x: 1 };
const proxy = new Proxy(target, {
get(obj, prop) {
console.log(`读取 ${prop}`);
return prop === 'y' ? 42 : obj[prop]; // 动态返回 y=42，不依赖原对象
}
});
console.log(proxy.x); // 输出 "读取 x" → 1
console.log(proxy.y); // 输出 "读取 y" → 42
和 Object.defineProperty 的本质区别
Object.defineProperty 是“静态属性级”的控制，只能对已知属性名提前设置 get/set；而 Proxy 是“动态操作级”的拦截，不管属性是否存在、是否后续新增、是否是 Symbol、是否是数组索引，只要操作发生，就能捕获。
- 给空对象加
Proxy，之后所有属性读写都能拦截；用defineProperty则必须一个个定义 - 对数组
push、length变更、索引赋值（arr[0] = ...）等，Proxy天然支持；defineProperty对数组索引无效（除非手动为每个索引定义） -
Proxy可拦截deleteProperty、isExtensible、preventExtensions等元操作，这是defineProperty完全做不到的
实际用途不只是“响应式框架”
除了 Vue/React 状态库这类典型场景，Proxy 还常用于：
