JavaScript属性描述符全解析

想要深入理解 JavaScript 对象属性的行为？本文将带你彻底掌握 JavaScript 属性描述符！属性描述符是控制对象属性行为的关键，分为数据描述符和访问器描述符两种类型。数据描述符包含 `value` 和 `writable`、`enumerable`、`configurable` 三个布尔特性，决定属性的值、是否可写、是否可枚举和是否可配置。访问器描述符则通过 `get` 和 `set` 函数控制属性的读取和设置，常用于数据验证和计算属性的实现。通过 `Object.defineProperty()` 可以自定义属性描述符，实现对对象属性的精细控制。掌握属性描述符，让你在 JavaScript 开发中更加游刃有余，无论是构建库、实现响应式系统还是封装逻辑，都能轻松应对！

JavaScript中的属性描述符用于控制对象属性的行为，分为数据描述符和访问器描述符。数据描述符包含value和writable、enumerable、configurable三个布尔特性；访问器描述符由get和set函数组成，二者不可共存。configurable控制属性是否可删除或修改描述符类型，enumerable决定属性是否可枚举。通过Object.defineProperty()定义属性时可设置描述符，默认值为false，而直接赋值添加的属性默认可写、可枚举、可配置。Object.getOwnPropertyDescriptor()可查看属性描述符。访问器常用于数据验证或计算属性，如fullName示例所示。属性描述符在封装逻辑和构建响应式系统中非常有用。

JavaScript中的属性描述符是用来控制对象属性行为的配置项。每个属性的背后都有一组描述符，决定了这个属性是否能被修改、枚举或删除。理解它们有助于更好地掌握对象的特性和数据封装。

属性描述符的类型

属性描述符分为两种：数据描述符和访问器描述符，二者不能同时存在。

无论哪种类型，都有以下共有的描述符：

• configurable：若为 false，表示该属性不能被删除，也不能改为另一种描述符类型，且其他描述符不能再被修改（某些情况下有例外）。
• enumerable：若为 true，该属性会在 for...in 循环或 Object.keys() 中出现。

数据描述符的 writable 和 value

数据描述符用于直接存储值的属性。

示例：

const obj = {};
Object.defineProperty(obj, 'name', {
  value: 'Alice',
  writable: false,
  enumerable: true,
  configurable: false
});
obj.name = 'Bob'; // 不会改变
console.log(obj.name); // 输出 Alice

访问器描述符的 get 和 set

访问器描述符不直接存储值，而是通过 get 和 set 函数来读取或设置属性。

常用于数据验证或计算属性：

const person = {
  firstName: 'John',
  lastName: 'Doe'
};

Object.defineProperty(person, 'fullName', {
  get() {
    return this.firstName + ' ' + this.lastName;
  },
  set(value) {
    const parts = value.split(' ');
    this.firstName = parts[0];
    this.lastName = parts[1];
  },
  enumerable: true,
  configurable: true
});

console.log(person.fullName); // John Doe
person.fullName = 'Jane Smith';
console.log(person.firstName); // Jane

如何查看和定义描述符

使用 Object.getOwnPropertyDescriptor() 可查看某个属性的描述符：

Object.getOwnPropertyDescriptor(obj, 'name');
// 返回 { value: 'Alice', writable: false, enumerable: true, configurable: false }

使用 Object.defineProperty() 或 Object.defineProperties() 定义或修改描述符。注意：直接通过赋值添加的属性，其描述符默认为 writable、enumerable、configurable 都是 true。

基本上就这些。属性描述符提供了对对象属性的精细控制，在构建库、实现响应式系统或需要封装逻辑时非常有用。不复杂但容易忽略。

到这里，我们也就讲完了《JavaScript属性描述符全解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于属性特性,Object.defineProperty(),属性描述符,数据描述符,访问器描述符的知识点！