如何实现JavaScript中的对象属性描述符？

夢幻星辰

发布时间：2025-09-21 15:14:01

706人浏览过

来源于php中文网

原创

object.defineproperty的核心用法包括：1. 创建只读属性，通过writable: false防止修改；2. 创建不可枚举属性，enumerable: false使其不被for...in或object.keys()遍历；3. 定义访问器属性，利用get/set实现动态计算与副作用控制；4. 锁定属性配置，configurable: false阻止删除和描述符修改。该方法适用于数据模型构建、响应式系统（如vue 2）及安全api设计。数据描述符用于静态值存储，含value和writable等特性；访问器描述符用于动态逻辑处理，由get/set函数驱动，二者互斥。enumerable控制属性在遍历和序列化中的可见性，常用于隐藏内部状态；configurable决定属性是否可被修改或删除，设为false可锁定属性结构，增强对象稳定性与安全性。两者共同提升对象的封装性与可控性。

如何实现javascript中的对象属性描述符？

JavaScript中的对象属性描述符，本质上就是一套用来精确定义和控制对象属性行为的元数据。它不仅仅是属性的值，更是一系列关于这个属性“如何存在”、“如何被访问”、“如何被修改”的规则集合。理解并运用它们，能让我们对JavaScript对象的底层机制有更深的掌控，从而写出更健壮、更灵活的代码，尤其是在构建库或框架时，它的价值不言而喻。

实现JavaScript中的对象属性描述符，主要通过

Object.defineProperty()

或

Object.defineProperties()

这两个静态方法来完成。它们允许我们直接修改或创建对象的属性，并为这些属性指定详细的特性。

Object.defineProperty

的核心用法与场景有哪些？

Object.defineProperty()

是我们操作属性描述符的入口。它的基本语法是

Object.defineProperty(obj, prop, descriptor)

，其中

obj

是目标对象，

prop

是属性名（字符串），

descriptor

则是一个包含属性描述符特性的对象。

立即学习“Java免费学习笔记（深入）”；

在我看来，这个方法真正强大的地方在于它能让我们突破常规的属性赋值方式，去定制属性的“行为”。比如，你可能想创建一个不可枚举的属性，让它不出现在

for...in

循环中，或者一个只读的属性，防止它被意外修改。

具体来说，它的核心用法包括：

创建只读属性（Immutable Property）：这是最常见的需求之一。通过设置

writable: false

，我们可以确保一个属性的值一旦被设置就不能再被修改。这在定义常量或配置项时非常有用，可以有效防止数据被无意中篡改。

const config = {};
Object.defineProperty(config, 'API_KEY', {
    value: 'your_api_key_123',
    writable: false, // 不可写
    enumerable: true, // 可枚举
    configurable: false // 不可配置，也不能删除
});
// config.API_KEY = 'new_key'; // 尝试修改会报错（严格模式下）或无效
console.log(config.API_KEY); // 'your_api_key_123'

创建不可枚举属性（Non-enumerable Property）：有时候，我们希望一个属性存在，但又不希望它在遍历时被暴露出来，比如一些内部状态或元数据。设置
```
enumerable: false
```
就能实现这一点。这对于保持对象接口的整洁性，隐藏实现细节很有帮助。
```
const user = {
    name: 'Alice'
};
Object.defineProperty(user, 'internalId', {
    value: 'u_12345',
    enumerable: false // 不可枚举
});
for (let key in user) {
    console.log(key); // 只输出 'name'
}
console.log(Object.keys(user)); // ['name']
```

定义访问器属性（Accessor Property）：这是

Object.defineProperty

最具魔力的功能之一。通过

get

和

set

方法，我们可以为属性定义自定义的存取逻辑。这意味着属性的读取和写入不再是简单的值操作，而可以触发一系列的计算、验证或副作用。Vue 2.x 的响应式系统就是基于此实现的。

const person = {
    firstName: 'John',
    lastName: 'Doe'
};
Object.defineProperty(person, 'fullName', {
    get: function() {
        console.log('获取 fullName...');
        return `${this.firstName} ${this.lastName}`;
    },
    set: function(value) {
        console.log('设置 fullName...');
        const parts = value.split(' ');
        this.firstName = parts[0];
        this.lastName = parts[1];
    },
    enumerable: true,
    configurable: true
});
console.log(person.fullName); // 获取 fullName... John Doe
person.fullName = 'Jane Smith'; // 设置 fullName...
console.log(person.firstName); // Jane

防止属性被删除或重新配置（Non-configurable Property）：当
```
configurable
```
设置为
```
false
```
时，该属性将不能被删除，也不能修改其描述符（除了
```
writable
```
可以在
```
true
```
时改为
```
false
```
）。这为对象的“最终形态”提供了保障，特别是在需要冻结对象结构时。

这些场景，无论是构建数据模型、实现观察者模式、还是创建更安全的API，

Object.defineProperty

都提供了一个底层且强大的工具。

百宝箱

百宝箱是支付宝推出的一站式AI原生应用开发平台，无需任何代码基础，只需三步即可完成AI应用的创建与发布。

下载

数据描述符与访问器描述符的区别与选择？

理解这两种描述符的根本差异，是高效使用

Object.defineProperty

的关键。它们就像是属性的两种截然不同的“存在形式”。

数据描述符（Data Descriptor）：它直接包含一个

value

属性，用来存储属性的实际值。它的核心特性是：

```
value
```
: 属性的值。可以是任意有效的JavaScript值（数字、对象、函数等）。
```
writable
```
: 一个布尔值，表示属性的值是否可以被修改。
```
true
```
表示可以修改，
```
false
```
表示只读。
```
enumerable
```
: 一个布尔值，表示属性是否可以被
```
for...in
```
循环或
```
Object.keys()
```
枚举。
```
configurable
```
: 一个布尔值，表示属性的描述符是否可以被修改，或者属性是否可以从对象中删除。

当你只是需要一个普通的属性来存储数据，并且想要精细控制它的可写、可枚举和可配置性时，就应该选择数据描述符。比如，你有一个用户对象，其中的

age

属性就非常适合用数据描述符来定义。

访问器描述符（Accessor Descriptor）：它不包含

value

属性，而是包含

get

和

set

函数。当属性被访问时，会调用

get

函数；当属性被赋值时，会调用

set

函数。它的核心特性是：

```
get
```
: 一个函数，当读取属性时会被调用。它的返回值就是属性的值。
```
set
```
: 一个函数，当写入属性时会被调用。它会接收新值作为参数。
```
enumerable
```
: 同数据描述符。
```
configurable
```
: 同数据描述符。

值得注意的是，一个描述符不能同时拥有

value

或

writable

和

get

或

set

。这是因为它们的机制是互斥的：数据描述符直接存储值，而访问器描述符通过函数来“计算”或“处理”值。

何时选择？

选择数据描述符：
- 当属性的值是静态的，或者其变化逻辑很简单，不需要额外的计算或副作用。
- 当你想创建常量、配置项或简单的数据字段。
- 这是最直接、性能开销最小的方式。
选择访问器描述符：
- 当属性的值是动态计算的，依赖于其他属性或外部状态。例如，一个
```
fullName
```
  属性由
```
firstName
```
  和
```
lastName
```
  拼接而成。
- 当你想在属性被读取或写入时执行额外的逻辑，比如数据验证、格式化、日志记录、触发UI更新等。
- 当你需要实现代理模式，将属性的访问转发到其他对象或逻辑。
- 在实现响应式系统（如Vue 2）时，访问器描述符是核心机制。

简单来说，如果属性只是一个“容器”，就用数据描述符；如果属性是一个“行为”，在存取时需要做一些事情，就用访问器描述符。这两种选择，决定了属性在对象中的“角色”和“生命周期”。

enumerable

和
configurable
这两个属性描述符有什么实际作用？

enumerable

和

configurable

常常被视为辅助性的特性，但它们在实际开发中扮演着非常重要的角色，尤其是在控制对象的“可见性”和“可变性”方面。

enumerable

(可枚举性)：这个特性决定了属性是否会出现在某些遍历操作中。

当
```
enumerable
```
为
```
true
```
时，属性会出现在：
- ```
for...in
```
  循环中。
- ```
Object.keys()
```
  、
```
Object.values()
```
  、
```
Object.entries()
```
  的结果中。
- ```
JSON.stringify()
```
  序列化对象时。
当
```
enumerable
```
为
```
false
```
时，属性则会被这些操作忽略。

实际作用：我认为

enumerable: false

的最主要价值在于隔离内部实现和外部接口。

隐藏内部属性：很多时候，一个对象会有一些仅供内部使用的辅助属性或状态，我们不希望它们在外部被随意枚举或暴露。例如，一个库可能会在对象上添加一些私有的元数据，通过设置
```
enumerable: false
```
，可以确保这些属性不会干扰到用户对对象进行遍历或序列化。这使得对象的公共接口更加清晰，减少了不必要的噪音。
控制JSON序列化：当使用
```
JSON.stringify()
```
将对象转换为JSON字符串时，只有可枚举的属性才会被包含进去。这意味着我们可以通过
```
enumerable: false
```
来选择性地排除某些敏感或不必要的属性，避免它们泄露或增加传输负担。
模拟私有属性：虽然JavaScript没有真正的私有属性（直到ES2022的私有字段），但
```
enumerable: false
```
提供了一种弱形式的“私有化”：属性依然可以被直接访问，但不容易被“发现”。

configurable

(可配置性)：这个特性是关于属性的“可变性”和“可删除性”的最终控制权。

当
```
configurable
```
为
```
true
```
时：
- 属性的描述符可以被修改（例如，将
```
writable
```
  从
```
true
```
  改为
```
false
```
  ，或者将数据描述符改为访问器描述符）。
- 属性可以从对象中删除。
当
```
configurable
```
为
```
false
```
时：
- 属性的描述符不能被修改（唯一的例外是，如果
```
writable
```
  为
```
true
```
  ，你可以将其改为
```
false
```
  ，但不能再改回
```
true
```
  ）。
- 属性不能从对象中删除。
- 一旦
```
configurable
```
  被设置为
```
false
```
  ，它就不能再被改回
```
true
```
  。这是一个单向操作，相当于对属性进行“锁定”。

实际作用：

configurable: false

的主要作用在于锁定和保护属性的结构。

防止意外修改或删除关键属性：在开发框架或共享库时，你可能不希望用户随意修改或删除一些核心属性（例如，一个全局配置对象中的关键设置，或者一个原型链上的方法）。通过设置
```
configurable: false
```
，可以有效地防止这种意外操作，增强代码的健壮性和稳定性。
创建“不可变”的对象结构：结合
```
writable: false
```
和
```
configurable: false
```
，可以创建一个完全不可变的属性。它的值不能变，它的描述符不能变，它也不能被删除。这在需要高度可靠性和预测性的场景中非常有用，例如定义数学常数或核心API接口。
安全加固：在某些安全敏感的应用中，通过锁定属性，可以减少潜在的攻击面，防止恶意代码修改或删除关键功能。

这两个特性，一个控制“看得见”的范围，一个控制“动得了”的范围，共同构成了JavaScript属性描述符强大的元编程能力，让我们能够以更精细的粒度来管理对象的行为和结构。

动态访问 JSON 中嵌套的、键名不固定的对象属性

动态访问 JSON 中嵌套且键名不固定的对象属性

JavaScript 中遍历对象数组并根据属性值执行条件操作的正确方法

JavaScript 中基于多字段去重的数组对象去重方法

如何正确更新数组中特定对象的属性值