Proxy 是 JavaScript 用于拦截并自定义对象基本操作的语言级代理机制，支持 get/set/has/ownKeys/deleteProperty/apply 等 trap，适用于响应式、验证等场景，但不能代理原始值且存在性能与相等性限制。
JavaScript 的 Proxy 对象用于创建一个代理，拦截并自定义对目标对象的基本操作（比如读取、赋值、枚举、函数调用等）。它不是用来“代理网络请求”的，而是 JavaScript 语言层面的“对象行为代理”，常用于数据响应式、验证、日志、访问控制等场景。
Proxy 基本结构：target + handler
创建 Proxy 需要两个参数：
- target：要代理的原始对象（可以是普通对象、数组、函数，甚至 null）
- handler：一个配置对象，定义各种“陷阱”（traps），即你想拦截的操作
示例：拦截属性读取和设置
const target = { price: 199, name: 'iPhone' };
const proxy = new Proxy(target, {
get(obj, prop) {
console.log(`读取 ${prop}:`, obj[prop]);
return obj[prop];
},
set(obj, prop, value) {
if (prop === 'price' && typeof value !== 'number') {
throw new Error('price 必须是数字');
}
console.log(`设置 ${prop} =`, value);
obj[prop] = value;
return true; // 必须返回 true 表示赋值成功
}
});
proxy.price; // 输出：读取 price: 199 → 返回 199
proxy.price = 299; // 输出：设置 price = 299 → 成功
proxy.price = 'free'; // 报错：price 必须是数字
常用 trap（拦截方法）有哪些？
以下是开发中最常遇到的几个 handler 方法：
立即学习“Java免费学习笔记（深入）”；
-
get(target, prop, receiver)：拦截读取属性，
receiver通常是 proxy 本身（用于正确处理 this） -
set(target, prop, value, receiver)：拦截设置属性，必须显式返回
true才算赋值成功 -
has(target, prop)：拦截
prop in proxy -
ownKeys(target)：拦截
Object.keys()、for...in等枚举操作，需返回字符串或 Symbol 数组 -
deleteProperty(target, prop)：拦截
delete proxy.prop - apply(target, thisArg, args)：仅对函数 target 有效，拦截函数调用
实用技巧：让 Proxy 支持深层响应式（简单版）
Proxy 默认只代理第一层。若想实现类似 Vue 的嵌套响应式，可在 get 中对返回的属性值自动包装为 Proxy：
function reactive(obj) {
if (typeof obj !== 'object' || obj === null) return obj;
return new Proxy(obj, {
get(target, key) {
const res = target[key];
// 对象/数组才递归代理（避免重复代理 Proxy 实例）
if (typeof res === 'object' && res !== null && !res._isProxy) {
return reactive(res);
}
return res;
}
});
}
const state = reactive({ user: { name: 'Alice', age: 30 } });
console.log(state.user.name); // 自动触发两次 get：一次取 user，一次取 name
⚠️ 注意：真实框架（如 Vue 3）会用 WeakMap 缓存已代理对象，避免重复代理和内存泄漏。
Proxy 不能代理什么？注意事项
- 不能代理
undefined或primitive（原始值），只能代理对象（包括数组、函数、Date、RegExp 等） - Proxy 实例与原对象不相等：
proxy === target是false - 某些操作无法被完全拦截（如
Object.prototype.toString.call(proxy)仍显示原构造器） - 性能敏感场景慎用——每次属性访问都多一层函数调用
基本上就这些。Proxy 不复杂但容易忽略细节，关键是理解「谁是 target」「handler 怎么配」「每个 trap 的返回要求」。用好它，能写出更可控、更智能的对象交互逻辑。
