JavaScript 中怎么使用 Object.defineProperty 精确定义对象的单个属性-js教程-PHP中文网

object.defineproperty 是 javascript 中用于精确定义或修改对象单个属性特性的核心方法，支持数据描述符（value/writable）和存取描述符（get/set），需注意二者不可混用，且 configurable、enumerable、writable 默认为 false。

javascript 中怎么使用 object.defineproperty 精确定义对象的单个属性

Object.defineProperty 是 JavaScript 中用于精确定义或修改对象**单个属性**特性的核心方法。它不批量操作，而是聚焦于一个属性的 可读性、可写性、可枚举性、可配置性，还能定义 getter/setter 实现响应式逻辑或数据拦截。

基础用法：定义一个普通属性

语法：Object.defineProperty(obj, prop, descriptor)，其中 descriptor 是描述符对象。

obj：目标对象
prop：要定义或修改的属性名（字符串或 Symbol）
descriptor：属性描述符，分两类：
- 数据描述符：含 value 和 writable（如普通变量）
- 存取描述符：含 get 和 set（如计算属性或副作用控制）

注意：数据描述符和存取描述符不能混用；必须至少包含 value/writable 或 get/set 之一。

控制属性行为的关键选项

所有描述符字段默认为 false（除 value 默认为 undefined），显式设置才生效：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

enumerable: true → 属性出现在 for...in 循环和 Object.keys() 中
configurable: false → 无法删除该属性，也无法再调用 defineProperty 修改其描述符（value 和 writable 在 configurable: true 时仍可改）
writable: false → obj.prop = xxx 被忽略（非严格模式）或报错（严格模式）
value 与 writable 配合使用；get/set 与 configurable、enumerable 配合使用

用 getter/setter 实现响应式监听

这是 Vue 2 响应式原理的基础。通过 setter 拦截赋值，触发更新逻辑：

let _price = 100;
const product = {};

Object.defineProperty(product, 'price', {
  get() {
    console.log('读取 price');
    return _price;
  },
  set(newVal) {
    console.log('price 被设为', newVal);
    _price = newVal;
    // 这里可通知视图更新
  },
  enumerable: true,
  configurable: true
});

⚠️ 注意：不能直接在 set 中给 this.price 赋值（会无限递归），需用私有变量或 WeakMap 存储实际值。