1. 高级特性与工作原理
1.1 Proxy 的工作原理与核心陷阱
Proxy 的核心能力来自“陷阱”（traps），它们允许对对象的基本操作进行自定义拦截。常见的陷阱包括 get、set、has、deleteProperty 等，以及用于函数调用的 apply、用于构造器的 construct、用于属性定义的 defineProperty、用于枚举的 ownKeys 等。通过这些陷阱，开发者可以在访问、赋值、查询属性存在性等行为发生时注入自定义逻辑，从而实现灵活的行为控制。下面的示例展示了如何通过 get 陷阱实现属性访问的自定义返回值，并采用 Reflect 保留默认行为的一致性：
const target = { price: 100 };
const handler = {get(target, prop, receiver) {if (prop === 'price') {return target[prop] * 1.1; // 演示：对价格的动态调整}return Reflect.get(target, prop, receiver);}
};
const proxy = new Proxy(target, handler);
console.log(proxy.price); // 110
通过上述代码，get 陷阱 在属性读取时注入了自定义逻辑，同时使用 Reflect.get 可以确保默认行为的正确性与安全性，避免破坏原对象的属性访问语义。
1.2 可撤销的代理：Proxy.revocable
Proxy.revocable 提供了一种在运行时可撤销的代理机制，适用于需要短生命周期代理的场景，例如插件沙箱、临时数据监控或授权资源访问。撤销后，代理对象会丢失对目标对象的控制能力，回到普通对象的行为，提升了安全性与内存管理的灵活性。
const target = { value: 42 };
const { proxy, revoke } = Proxy.revocable(target, {get(t, prop, r) { return t[prop]; }
});
console.log(proxy.value); // 42
revoke();
try {console.log(proxy.value); // TypeError: Cannot perform 'get' on 'Proxy'
} catch (e) { console.error(e); }
使用 Proxy.revocable 能在需要时快速“解封”/撤销代理，降低长期监听带来的风险，同时保持代码结构的整洁性。
1.3 Reflect 的协作：保持行为的一致性
在陷阱中调用默认行为的最佳实践是借助 Reflect，它提供了一组与对象操作一一对应的静态方法。通过 Reflect，可以避免手动实现重复的默认逻辑，从而使代理的行为更易维护、调试也更简单。
const target = { a: 1 };
const handler = {set(target, prop, value, receiver) {if (typeof value !== 'number') {return false;}return Reflect.set(target, prop, value, receiver);}
};
const proxy = new Proxy(target, handler);
proxy.a = 2; // 成功
proxy.b = 'x'; // 被拦截，不执行设置操作
综上，Reflect 提供的工具可以让代理在实现自定义行为的同时，仍然遵循语言原生的行为约定与异常处理机制。
2. 数据访问、变更追踪与数据绑定
2.1 自动绑定与访问拦截
在 UI 数据绑定、表单状态管理等场景中，通过 get 陷阱实现对属性访问的监控，可以在属性被读取时触发订阅更新逻辑，从而实现响应式绑定。该模式的核心在于将数据模型的读取行为转化为对订阅者的通知，避免显式的事件注册代码冗余。
一个简单的实现思路是：维护一个全局当前依赖的集合，在读取属性时将依赖收集到一个订阅表中；当属性发生变化时，通过 set 陷阱触发所有订阅者执行，从而更新视图。
function observe(obj) {const deps = new Map();const wrap = new Proxy(obj, {get(target, prop, receiver) {if (!deps.has(prop)) deps.set(prop, []);const dep = deps.get(prop);if (CURRENT_SUB) dep.push(CURRENT_SUB);return Reflect.get(target, prop, receiver);},set(target, prop, value, receiver) {const result = Reflect.set(target, prop, value, receiver);const dep = deps.get(prop) || [];dep.forEach(fn => fn());return result;}});return wrap;
}
let CURRENT_SUB = null;
const data = observe({ name: 'Alice', age: 30 });
// 订阅者示例
CURRENT_SUB = () => console.log('更新视图');
const proxy = data;
console.log(proxy.name); // 访问时，会将订阅者加入 name 的依赖
CURRENT_SUB = null;
proxy.name = 'Bob'; // 触发更新
数据绑定场景通常需要谨慎处理循环依赖与性能，合理的依赖收集和清晰的订阅清单是关键。
2.2 变更追踪：持续观察对象的副作用
set 陷阱 能够捕捉对对象属性的写入行为，并将变更信息推送给观察者、日志系统或缓存层。这在实现可观测对象、状态管理库或调试工具时尤为有用。
通过对 set、defineProperty 等陷阱的组合，可以实现对对象深层变更的跟踪，甚至对新属性的添加和删除进行记录，确保变更历史可溯。
function observable(target) {const subscribers = new Set();return new Proxy(target, {set(obj, prop, value, receiver) {const old = obj[prop];const ok = Reflect.set(obj, prop, value, receiver);if (old !== value) {subscribers.forEach(fn => fn(prop, old, value));}return ok;},get(obj, prop, receiver) {if (prop === '__subscribe') {return (fn) => subscribers.add(fn);}return Reflect.get(obj, prop, receiver);}});
}
const state = observable({ count: 0 });
state.__subscribe((p, oldV, newV) => {console.log(`property ${p} changed from ${oldV} to ${newV}`);
});
state.count = 1; // 会输出变更信息
在实际应用中，需注意对复杂对象的深层变更进行分层监听，以及对高频变更的节流/去抖处理，避免对性能造成压力。
2.3 数据兜底与校验：确保对象属性的有效性
利用 set 陷阱，可以在写入前进行类型检查、范围校验和默认值兜底，实现更健壮的数据模型。将校验逻辑放置在代理层，可以在应用其他地方复用同一套规则。
示例中，当尝试写入不符合规则的值时，代理可以拒绝写入，或者将其转换为合理的默认值，确保下游逻辑不会因为错误数据而崩溃。
function validator(obj, rules) {return new Proxy(obj, {set(target, prop, value, receiver) {const rule = rules[prop];if (rule && !rule(value)) {console.warn(`Invalid value for ${prop}: ${value}`); return false;}return Reflect.set(target, prop, value, receiver);}});
}
const user = { name: '', age: 0 };
const withRules = validator(user, {name: v => typeof v === 'string' && v.length > 0,age: v => Number.isInteger(v) && v >= 0
});
withRules.name = ''; // 不合法，写入被拒绝
withRules.age = 25; // 合法
代理层的校验能力使数据模型更稳定，但也要避免过度封装导致的调试困难与性能瓶颈。
3. 安全性与访问控制的场景
3.1 权限控制代理
在多租户或分级权限系统中，通过代理实现对敏感属性的访问控制，可以在读取或修改前进行权限校验，确保不可见属性不会被泄露。
结合 Reflect，可以在没有权限时抛出错误或返回降级值，保持 API 的可预测性，同时减少后端端点的复杂性。
function authorize(target, user) {return new Proxy(target, {get(t, prop, r) {if (prop === 'salary' && !user.isAdmin) {throw new Error('Access denied');}return Reflect.get(t, prop, r);}});
}
const staff = { name: 'Jane', salary: 7000 };
const proxy = authorize(staff, { isAdmin: false });
console.log(proxy.name); // Jane
console.log(proxy.salary); // 抛出错误
此类模式有助于在前端实现强约束的访问策略，同时降低后台 API 的暴露风险。
3.2 输入校验与数据清洗
代理也可以作为输入端的第一道“防线”，在写入发生前对数据进行清洗、格式化和规范化，防止异常输入进入核心逻辑。通过组合 get 和 set，可以实现自动转换、格式化和默认值注入。
这类模式尤其对表单处理、配置对象、环境变量注入等场景有帮助，能提高用户体验和系统稳定性。
function clean(obj) {return new Proxy(obj, {set(target, prop, value, receiver) {if (prop === 'email') {value = String(value).trim().toLowerCase();}return Reflect.set(target, prop, value, receiver);}});
}
const config = clean({ email: ' USER@EXAMPLE.COM ' });
config.email = ' TEST@Example.Com ';
console.log(config.email); // 'test@example.com'
注意点：代理层的校验应与后端接口的校验保持一致，避免出现前后端规则冲突的情况。
3.3 沙箱式执行与第三方代码隔离
针对插件、脚本注入或第三方代码，代理结构可以提供一个“沙箱”环境，在对外暴露对象之前进行拦截、限制和资源统计，防止对全局状态的不可控修改。
通过结合 apply、construct 及对全局对象的象征性封装，可以在隔离环境内执行代码，同时对 I/O、网络请求等行为进行记录与限流。
const sandboxGlobals = {};
const sandboxProxy = new Proxy(sandboxGlobals, {get(t, key) {if (key in t) return t[key];throw new Error(`Access to ${key} is blocked in sandbox`);},set(t, key, value) {// 限制对某些全局属性进行写入if (['document', 'window'].includes(key)) {throw new Error('Modification of global objects is forbidden in sandbox');}t[key] = value;return true;}
});
// 在沙箱中执行脚本片段
沙箱实现的核心是对环境边界的严格控制与可观测性，同时要注意性能开销和调试难度。
4. 实战案例：API 调用、缓存与监控
4.1 API 调用代理与缓存策略
在前端应用需要对外部 API 进行统一代理时，Proxy 可以拦截接口调用，做统一的缓存、降级、重试策略，并记录调用信息以便监控。通过 apply 陷阱实现函数调用的增强，可以对请求参数、请求头和返回数据进行标准化处理。
示例演示了一个简单的 API 调用代理，它对方法调用进行拦截并实现缓存。注意缓存的失效策略和并发控制需要额外实现。
function cacheProxy(target, opts = {}) {const cache = new Map();return new Proxy(target, {apply(_target, thisArg, args) {const key = JSON.stringify(args);if (cache.has(key)) {return cache.get(key);}const result = Reflect.apply(_target, thisArg, args);cache.set(key, result);return result;}});
}
async function fetchJson(url) {const res = await fetch(url);return res.json();
}
const proxiedFetch = cacheProxy(fetchJson);
proxiedFetch('https://api.example.com/data').then(console.log);
缓存策略的巧妙组合，能显著提升用户体验与页面响应速度，但需谨慎处理缓存失效与数据一致性问题。
4.2 远程数据虚拟化与懒加载
当对象代表远端资源或昂贵计算结果时，Proxy 可以实现懒加载与虚拟化。访问未缓存的数据时触发远端请求或计算，后续读取直接返回缓存值，减少不必要的计算和网络开销。
这种模式常见于大型数据集的分页加载、虚拟滚动列表等场景，可以显著降低初始加载时间。
function lazyProxy(fetcher) {let value;let filled = false;return new Proxy({}, {get(_, prop) {if (!filled) {value = fetcher();filled = true;}return value[prop];}});
}
const dataProxy = lazyProxy(() => fetchJson('/large-dataset').then(d => d.slice(0, 100)));
懒加载需要缓存结果并考虑并发请求的去重，以避免重复触发网络请求。
4.3 日志与性能监控代理
将 Proxy 应用于日志记录，是实现横向横向监控的常见做法。通过拦截 get、set、apply 等操作，可以记录对象的使用模式、属性访问频率以及函数调用耗时。
结合性能计时 API，可以在陷阱中统计执行时间并将数据发送到分析后端，以便持续优化应用性能。
function timingProxy(fn) {return new Proxy(fn, {apply(target, thisArg, args) {const t0 = performance.now();const result = Reflect.apply(target, thisArg, args);const t1 = performance.now();console.log(`Call took ${t1 - t0} ms`);return result;}});
}
function apiCall(url) { return fetch(url).then(r => r.json()); }
const proxiedApiCall = timingProxy(apiCall);
proxiedApiCall('/data').then(console.log);
通过这种方式实现的监控代理，可以帮助团队全面了解应用在真实场景下的性能瓶颈，并指导后续优化工作。
