返回

重温 JavaScript：属性描述符

前端

引言

在 JavaScript 的世界中，属性符是一个重要的概念，它定义了如何与对象中的属性进行交互。属性符包含有关属性的信息，例如它的值、可写性、可枚举性以及可配置性。了解属性描述符对于理解 JavaScript 对象的底层机制和有效管理它们至关重要。

数据属性

数据属性是 JavaScript 对象中属性最基本的类型。它们直接存储在对象中，并且具有一个值。数据属性的属性描述符包含以下属性：

  • value: 属性的值。
  • writable: 布尔值，指示属性是否可写。
  • enumerable: 布尔值，指示属性是否可枚举（通过 for...in 循环或 Object.keys() 方法）。
  • configurable: 布尔值，指示属性描述符是否可配置（可以修改或删除）。

存取器属性

存取器属性是 JavaScript 对象中的另一种属性类型。它们不直接存储在对象中，而是通过一对 getter 和 setter 函数访问。getter 函数负责从对象中检索属性值，而 setter 函数负责更新该值。存取器属性的属性描述符包含以下属性：

  • get: 获取属性值的 getter 函数。
  • set: 设置属性值的 setter 函数。
  • enumerable: 布尔值，指示属性是否可枚举。
  • configurable: 布尔值，指示属性描述符是否可配置。

语法

JavaScript 中的属性描述符可以使用以下语法来定义：

{
  value: ...,
  writable: ...,
  enumerable: ...,
  configurable: ...
}

或者：

{
  get: function() { ... },
  set: function(value) { ... },
  enumerable: ...,
  configurable: ...
}

示例

让我们考虑以下示例：

const person = {
  name: 'John Doe',
  age: 30
};

// 获取 person 对象的 name 属性的属性描述符
const nameDescriptor = Object.getOwnPropertyDescriptor(person, 'name');

// 输出属性描述符
console.log(nameDescriptor);

输出结果为：

{
  value: 'John Doe',
  writable: true,
  enumerable: true,
  configurable: true
}

该属性描述符表明 name 属性的值为 'John Doe'，它是可写的、可枚举的且可配置的。

修改属性描述符

JavaScript 允许修改属性描述符。例如，要将 name 属性标记为不可写，我们可以使用以下代码：

Object.defineProperty(person, 'name', {
  writable: false
});

现在，尝试更改 name 属性的值将抛出一个 TypeError 异常。

结论

属性描述符是 JavaScript 对象中一个强大的概念，它提供了对对象属性的细粒度控制。通过理解属性描述符，开发者可以创建更灵活、更可定制的 JavaScript 对象。