数据属性：深入了解对象的强大属性描述符

前端

2023-11-12 19:31:02

数据属性与访问器属性

在JavaScript中，属性可以分为两类：数据属性和访问器属性。数据属性是传统的属性，它存储着一个值，并且可以通过点运算符或方括号运算符来访问。访问器属性则不同，它不存储一个值，而是通过getter和setter方法来访问。

使用Object.defineProperty()方法设置属性符

我们可以使用Object.defineProperty()方法来设置一个属性是数据属性还是访问器属性。该方法接收三个参数：

对象：要设置属性的对象。
属性名：要设置的属性的名称。
属性符：一个对象，用于描述属性的特性。

属性描述符可以包含四个特性：

value：属性的值。
writable：一个布尔值，表示属性是否可写。
enumerable：一个布尔值，表示属性是否可枚举。
configurable：一个布尔值，表示属性是否可配置。

数据属性的四个特性

value

value特性是属性的值。它可以是任何JavaScript值，包括对象、数组、函数等。

writable

writable特性是一个布尔值，表示属性是否可写。如果writable为true，则属性可以被重新赋值。如果writable为false，则属性不能被重新赋值。

enumerable

enumerable特性是一个布尔值，表示属性是否可枚举。如果enumerable为true，则属性可以通过for...in循环或Object.keys()方法枚举出来。如果enumerable为false，则属性不能被枚举出来。

configurable

configurable特性是一个布尔值，表示属性是否可配置。如果configurable为true，则属性的特性可以被修改。如果configurable为false，则属性的特性不能被修改。

实例演示

以下代码演示了如何使用Object.defineProperty()方法来设置一个数据属性：

const person = {};

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

console.log(person.name); // "John Doe"
person.name = "Jane Doe";
console.log(person.name); // "Jane Doe"

for (const property in person) {
  console.log(property); // "name"
}

在上面的代码中，我们首先创建了一个空对象person。然后，我们使用Object.defineProperty()方法向person对象添加了一个名为name的属性。我们将name属性的value设置为"John Doe"，并将writable、enumerable和configurable特性都设置为true。

接下来，我们使用console.log()方法打印person.name的值。结果为"John Doe"。然后，我们使用person.name = "Jane Doe"将name属性的值重新赋值为"Jane Doe"。

再次使用console.log()方法打印person.name的值。结果为"Jane Doe"。这表明name属性是可写的。

最后，我们使用for...in循环来枚举person对象的所有属性。结果为"name"。这表明name属性是可枚举的。