javascript中用proxy实现虚属性和动态计算字段的核心是拦截get操作，按需生成值而不预先存储；支持依赖响应、批量配置规则，并需注意枚举与序列化等边界限制。
JavaScript 中用 Proxy 实现虚属性和动态计算字段，核心是拦截对象的 get 操作，在访问时按需生成值，不预先存储、不污染原始数据结构。
定义 Proxy 拦截 get 实现虚属性
虚属性指对象本身没有该属性，但访问时能返回有意义的值。通过 Proxy 的 handler.get 拦截器，对特定键名做特殊处理：
- 检查目标对象是否已有该属性，有则直接返回
- 若无，判断是否为预设的“虚属性名”，是则执行对应逻辑（如格式化、拼接、转换）
- 返回计算结果，而非存储到原对象中
例如给用户对象添加 fullName 虚属性：
const user = { firstName: 'Alice', lastName: 'Smith' };<br>const handler = {<br> get(target, prop) {<br> if (prop === 'fullName') {<br> return `${target.firstName} ${target.lastName}`;<br> }<br> return target[prop];<br> }<br>};<br>const proxy = new Proxy(user, handler);<br>console.log(proxy.fullName); // "Alice Smith"支持动态计算字段并响应依赖变化
若计算字段依赖其他属性，且这些属性可能后续被修改，需确保每次访问都重新计算——Proxy 天然满足这点，因为 get 每次触发都会重新执行逻辑。
- 避免缓存结果（除非显式加 memoization），保证实时性
- 可结合
set拦截器触发更新通知（如配合事件或响应式系统） - 注意不要在
get中修改目标对象，否则可能引发无限递归
比如添加一个带单位的价格字段：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
const product = { price: 99.9, currency: 'USD' };<br>const handler = {<br> get(target, prop) {<br> if (prop === 'priceDisplay') {<br> return `${target.currency} ${target.price.toFixed(2)}`;<br> }<br> return target[prop];<br> },<br> set(target, prop, value) {<br> target[prop] = value;<br> return true;<br> }<br>};<br>const proxy = new Proxy(product, handler);<br>console.log(proxy.priceDisplay); // "USD 99.90"<br>proxy.price = 129.5;<br>console.log(proxy.priceDisplay); // "USD 129.50"（自动更新）批量管理虚属性与可配置计算规则
当虚属性较多时，硬编码判断易维护难。可将计算规则抽离为映射表，提升可扩展性：
- 用
computed配置对象声明字段名与计算函数 -
get拦截器查表，命中则调用对应函数并传入目标对象 - 函数内可自由访问 target 任意属性，支持嵌套、条件、异步（需返回 Promise 并 await）
示例：
const computedRules = {<br> fullName: (obj) => `${obj.firstName || ''} ${obj.lastName || ''}`,<br> initials: (obj) => (obj.firstName?.[0] || '') + (obj.lastName?.[0] || ''),<br> isAdult: (obj) => obj.age >= 18<br>};<br><br>const handler = {<br> get(target, prop) {<br> if (prop in computedRules) {<br> return computedRules[prop](target);<br> }<br> return target[prop];<br> }<br>};注意事项与边界情况
使用 Proxy 实现虚属性虽灵活，但需留意实际限制：
- Proxy 无法代理基本类型，只能包装对象（包括数组、函数等）
- for...in、Object.keys() 等枚举操作默认不包含虚属性，需配合
ownKeys和has拦截器支持 - JSON.stringify() 不会序列化虚属性，除非重写
toJSON方法 - 严格模式下，
set拦截器必须返回 true 才算赋值成功
如需让 fullName 出现在 Object.keys() 中：
const handler = {<br> get(target, prop) { /* ... */ },<br> ownKeys() {<br> return [...Object.keys(user), 'fullName'];<br> },<br> has(target, prop) {<br> return prop === 'fullName' || prop in target;<br> }<br>};Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
