enumerable 和 configurable 属性详解

enumerable 和 configurable 属性详解

在 JavaScript 中，Object.defineProperty() 方法的配置项 enumerable 和 configurable 控制着对象属性的基本行为。下面我将详细解释这两个关键配置项。

可视化对比表

特性	enumerable	configurable
控制内容	属性是否可枚举	属性是否可配置
默认值	false	false
影响操作	for...in、Object.keys()、JSON.stringify()	delete、属性重定义、特性修改
设置为 true 时	属性出现在枚举操作中	属性可删除、可修改特性
设置为 false 时	属性在枚举操作中不可见	属性不可删除、特性不可修改
在 Vue 中的应用	确保属性在模板渲染中可见	允许 Vue 动态修改响应式属性

详细说明

1. enumerable（可枚举性）

enumerable 控制属性是否出现在对象的属性枚举中。

• 默认值：false

• 设置为 true 时：

  • 属性会出现在 for...in 循环中
  • 属性会被 Object.keys() 包含
  • 属性会被 JSON.stringify() 序列化
  • 属性会被 Object.assign() 和扩展运算符 (...) 复制

• 设置为 false 时：

  • 属性不会出现在上述操作中
  • 但仍可通过直接访问属性名获取 (obj.property)
  • 可用 Object.getOwnPropertyNames() 获取

const obj = {
   };

// 添加可枚举属性
Object.defineProperty(obj, 'visible', {
   
  value: 'I am visible',
  enumerable: true
});

// 添加不可枚举属性
Object.defineProperty(obj, 'hidden', {
   
  value: 'I am hidden',
  enumerable: false
});

console.log(Object.keys(obj)); // ['visible']
console.log(JSON.stringify(obj));