JavaScript 对象属性深度解析：属性标志与描述符-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00096/article/details/148416491

JavaScript 对象属性深度解析：属性标志与描述符

zh.javascript.info 现代 JavaScript 教程（The Modern JavaScript Tutorial），以最新的 ECMAScript 规范为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。项目地址: https://gitcode.com/gh_mirrors/zh/zh.javascript.info

引言

在 JavaScript 中，对象是核心概念之一，而属性则是构成对象的基本单元。大多数开发者对属性的理解停留在简单的键值对层面，但实际上 JavaScript 的对象属性远比这复杂和强大。本文将深入探讨对象属性的高级特性——属性标志和属性描述符，帮助你掌握对象属性的精细控制能力。

属性标志：属性的隐藏特性

每个对象属性除了包含值(value)外，还有三个重要的标志(flags)：

writable - 控制属性值是否可修改
- true：属性值可以被修改（默认）
- false：属性值只读不可写
enumerable - 控制属性是否在枚举中可见
- true：属性会在for...in循环中出现（默认）
- false：属性不会出现在枚举中
configurable - 控制属性的配置权限
- true：属性可以被删除，标志可以被修改（默认）
- false：属性不可删除且标志不可修改

获取属性描述符

要查看属性的完整信息，包括值和所有标志，可以使用Object.getOwnPropertyDescriptor方法：

let user = { name: "John" };
let descriptor = Object.getOwnPropertyDescriptor(user, 'name');

console.log(JSON.stringify(descriptor, null, 2));
/*
{
  "value": "John",
  "writable": true,
  "enumerable": true,
  "configurable": true
}
*/

修改属性标志

要修改属性标志，可以使用Object.defineProperty方法：

let user = {};

Object.defineProperty(user, "name", {
  value: "John",
  writable: false,
  enumerable: true,
  configurable: true
});

如果不指定标志，它们默认为false，这与常规方式创建属性不同。

标志的实际应用

创建只读属性

通过设置writable: false，我们可以创建不可修改的属性：

let user = {
  name: "John"
};

Object.defineProperty(user, "name", {
  writable: false
});

user.name = "Pete"; // 在严格模式下会报错

隐藏枚举属性

设置enumerable: false可以隐藏属性，使其不出现在for...in循环和Object.keys()中：

let user = {
  name: "John",
  toString() { return this.name; }
};

Object.defineProperty(user, "toString", {
  enumerable: false
});

for (let key in user) console.log(key); // 只输出 "name"
console.log(Object.keys(user)); // ["name"]

创建不可配置属性

configurable: false会锁定属性，防止被删除或修改标志：

let user = {
  name: "John"
};

Object.defineProperty(user, "name", {
  configurable: false
});

delete user.name; // 失败
Object.defineProperty(user, "name", { enumerable: false }); // 报错

注意：不可配置但可写的属性仍然可以修改其值。

批量操作属性

定义多个属性

Object.defineProperties允许一次性定义多个属性：

let user = {};

Object.defineProperties(user, {
  name: { value: "John", writable: false },
  age: { value: 30, enumerable: true }
});

获取所有属性描述符

Object.getOwnPropertyDescriptors可以获取对象所有属性的完整描述符：

let descriptors = Object.getOwnPropertyDescriptors(user);

这个方法特别适合用于"标志感知"的对象克隆：

let clone = Object.defineProperties({}, Object.getOwnPropertyDescriptors(obj));

这种方式比简单的属性赋值更完善，因为它会保留所有属性的原始标志。

对象级别的访问控制

除了单个属性的控制，JavaScript 还提供了对整个对象的访问限制方法：

Object.preventExtensions(obj) - 禁止添加新属性
Object.seal(obj) - 禁止添加/删除属性（设置所有属性为configurable: false）
Object.freeze(obj) - 禁止添加/删除/修改属性（设置所有属性为configurable: false, writable: false）

对应的检测方法：