如何利用 Object.defineProperties 实现具备“自动计算属性”的业务数据对象-js教程-PHP中文网

object.defineproperties 可通过 get 描述符实现只读自动计算属性，如总价=单价×数量；需设 writable: false、不设 set，支持缓存与依赖追踪，但无法监听深层变化且 json 序列化不包含。

如何利用 object.defineproperties 实现具备“自动计算属性”的业务数据对象

用 Object.defineProperties 实现自动计算属性，核心是把“计算逻辑”封装在 get 描述符里，让属性读取时动态执行，而非存储固定值。它不依赖框架，轻量、可控，特别适合业务中需要实时联动的字段（比如总价 = 单价 × 数量、状态文案 = 根据多个字段推导）。

定义只读的自动计算属性

计算属性通常不应被直接赋值，否则会破坏逻辑一致性。通过设置 writable: false 并提供 get，即可实现只读自动计算：

const order = {
  price: 89.9,
  quantity: 3
};
<p>Object.defineProperties(order, {
total: {
get() {
return Number((this.price * this.quantity).toFixed(2));
},
enumerable: true,
configurable: false
}
});</p><p>console.log(order.total); // 269.70
order.total = 100; // 无效（严格模式下报错）</p>

get 函数内使用 this 指向当前对象，可安全访问其他属性
enumerable: true 让该属性出现在 for...in 和 Object.keys() 中（按需设置）
不设 set 且 writable: false（默认），天然只读

响应式依赖追踪（简易版）

原生 JS 不自动追踪依赖，但可通过手动触发更新，模拟“响应式”。适用于数据变化频率低、或配合事件/方法调用的场景：

const form = {
  firstName: '张',
  lastName: '三',
  _fullName: null
};
<p>Object.defineProperties(form, {
fullName: {
get() {
// 缓存 + 脏检查：仅当依赖变化时重新计算
const current = <code>${this.firstName} ${this.lastName}</code>;
if (this._fullName !== current) {
this._fullName = current;
}
return this._fullName;
},
enumerable: true
}
});</p><p>// 当外部修改 firstName/lastName 后，可显式重置缓存（或结合 Proxy 增强）
form.firstName = '李';
console.log(form.fullName); // '李 三'（下次 get 时自动更新）</p>

适合简单组合（如姓名、路径拼接），避免每次 get 都重复计算开销
若需“自动感知变化”，需配合 Proxy 或业务层主动调用更新方法
不要在 get 中修改 this 的其他属性，易引发无限循环

封装成可复用的计算属性工厂函数

避免重复写 defineProperties，抽离为工具函数，支持传入计算逻辑和依赖字段名：

function defineComputed(obj, props) {
  const descriptors = {};
  for (const [key, fn] of Object.entries(props)) {
    descriptors[key] = {
      get() {
        return fn.call(this);
      },
      enumerable: true,
      configurable: true
    };
  }
  Object.defineProperties(obj, descriptors);
}
<p>// 使用
const user = { baseSalary: 12000, bonus: 3000, taxRate: 0.15 };
defineComputed(user, {
grossIncome() {
return this.baseSalary + this.bonus;
},
netIncome() {
return Number((this.grossIncome * (1 - this.taxRate)).toFixed(2));
}
});</p><p>console.log(user.netIncome); // 12750</p>