目录

一.概念引入

二.属性描述符的常见用法

三.实例运用(数据验证)

四.基于JS的属性描述符

使用中常见的问题

最近学JavaScript的过程中,有幸学到了一个新的知识点----属性描述符,尽管它在业务代码中可能并不常见,但是许多库源码中都有它的身影,比如vue

一.概念引入

属性描述符可以理解为用于描述数据对象属性的一种标识符或标签。它可以用来描述数据的特征、性质或其他相关信息。例如，在编程中，我们可以为一个对象定义一系列属性，每个属性都有一个相应的属性描述符，用于说

明该属性的名称、数据类型、是否可读/可写等。
 
属性描述符的作用是提供对对象属性的更详细的描述和控制。它们可以用于数据建模、数据验证、访问控制等方面。通过使用属性描述符，我们可以更好地组织和管理数据，确保数据的一致性和正确性。
 
在不同的编程语言或领域中，属性描述符的具体实现和用法可能会有所不同。有些语言可能提供了特定的语法或机制来定义和使用属性描述符，而在其他情况下，可能需要通过自定义类或数据结构来实现类似的功能。

二.属性描述符的常见用法

在编程中，属性描述符有很多常见的用法，以下是一些常见的例子：

1. 数据验证：通过定义属性描述符，可以在设置或修改属性值时进行数据验证，确保属性的值符合一定的规则或约束。
   
2. 访问控制：可以使用属性描述符来控制属性的可读/可写性，例如限制某些属性只能被读取，或者只允许在特定条件下进行修改。
   
3. 自动计算或修改属性值：属性描述符可以在属性被访问或修改时执行一些自动的计算或修改操作，例如根据其他属性的值来计算某个属性的值。
   
4. 数据序列化和反序列化：在对象序列化和反序列化过程中，属性描述符可以用于指定如何将属性值转换为特定的格式（如 JSON、XML 等），以及在反序列化时将数据还原为对象的属性。
   
5. 属性观察者或通知机制：通过属性描述符，可以注册观察者或回调函数，当属性发生变化时触发相应的操作，例如通知其他部分的代码进行更新。
   
6. 缓存和性能优化：利用属性描述符，可以实现属性的缓存机制，避免不必要的计算或数据获取，提高程序的性能。

这些只是属性描述符的一些常见用法，具体的应用场景和用法取决于编程语言和项目的需求。不同的编程语言可能有不同的实现方式和特性来支持属性描述符的使用。

例如，在 Python 中，可以使用  @property  装饰器和  @descriptor  类装饰器来定义属性描述符。通过定义特定的方法（如  getter 、 setter 、 deleter  等）来控制属性的访问和修改行为。
 

三.实例运用(数据验证)

1. 整数范围验证：假设我们有一个表示年龄的属性，可以使用属性描述符来确保年龄值在合理的范围内（例如 18 到 120 岁之间）。

class Person:
    @property
    def age(self):
        return self._age
 
    @age.setter
    def age(self, value):
        if not 18 <= value <= 120:
            raise ValueError("年龄必须在 18 到 120 岁之间。")
        self._age = value

在这个例子中， age  属性的  setter  方法会检查新设置的年龄值是否在指定范围内，如果不在范围内，会抛出一个异常。

2. 字符串格式验证：如果有一个表示电子邮件地址的属性，可以使用属性描述符来验证电子邮件地址的格式是否正确。

class Person:
    @property
    def email(self):
        return self._email
 
    @email.setter
    def email(self, value):
        if not re.match(r"^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$", value):
            raise ValueError("无效的电子邮件地址。")
        self._email = value

在这个例子中，使用了正则表达式来验证电子邮件地址的格式是否正确。

3. 数据类型验证：可以使用属性描述符来确保属性的值是特定的数据类型，例如整数或浮点数。 

class Person:
    @property
    def score(self):
        return self._score
 
    @score.setter
    def score(self, value):
        if not isinstance(value, (int, float)):
            raise TypeError("分数必须是整数或浮点数。")
        self._score = value

在这个例子中， score  属性的  setter  方法会检查新设置的分数值是否为整数或浮点数类型。
这些只是一些简单的数据验证示例，实际应用中可以根据具体的需求和数据验证规则来设计更复杂的属性描述符。通过在属性的  setter  方法中进行验证，可以确保数据的一致性和正确性，避免无效或不合法的数据进入对象。

四.基于JS的属性描述符

在 JavaScript 中，属性描述符用于描述和定义对象属性的特性。属性描述符是一个内部对象，包含以下常见属性：

1. Configurable：决定是否可以使用  delete  删除属性，以及是否可以修改属性描述符的特性，默认值为  true 。
   
2. Enumerable：决定属性是否出现在对象的属性枚举中，比如是否可以通过  for-in  循环返回该属性，默认值为  true 。
   
3. Writable：决定是否可以修改属性的值，默认值为  true 。
   
4. Value：包含这个属性的数据值，读取属性值的时候，从这个位置读；写入属性值的时候，把新值保存在这个位置。默认值为  undefined 。
   
5. Getter：在读取属性时调用的函数。默认值为  undefined 。
   
6. Setter：在写入属性时调用的函数。默认值为  undefined 。
   

ps:getter和setter常常放在一起,合称访问器
如果属性同时具有  getter  和  setter  方法，那么它是一个读/写属性；如果它只有  getter  方法，那么它是一个只读属性；如果它只有  setter  方法，那么它是一个只写属性；读取只写属性总是返回  undefined 。
 
以下是一个使用属性描述符定义可读/写属性的示例：
 

var obj = {};
Object.defineProperty(obj, 'x', {
  configurable: true,
  enumerable: true,
  writable: true,
  value: 0,
  getter: function() {
    return this._x;
  },
  setter: function(val) {
    if (typeof val !== 'number') {
      throw new TypeError('Invalid value');
    }
    this._x = val;
  }
});
 
console.log(obj.x); 
 
obj.x = 5;
 
console.log(obj.x);

在这个示例中，通过  Object.defineProperty  方法定义了一个名为  x  的可读/写属性。 configurable 、 enumerable  和  writable  属性分别设置为  true ，表示可以删除、枚举和修改属性。 value  属性设置为  0 ，表示属性的初始值。 getter  和  setter  属性分别定义了读取和写入属性时调用的函数。

1. 使用中常见的问题
   在使用属性描述符时，需要注意以下几个问题：
    
   configurable  属性为单向操作，设置为  false  后无法再改为  true ，且该属性不可删除。
   
2. enumerable  属性不能由  true  改为  false ，反过来也不行。
   
3. writable  属性可以由  true  更改为  false ，但不能反过来。
   
4. 所有方法创建都是浅不变性，只会影响目标对象和它的直接属性。如果属性值为对象，其内容仍然是可变的。
   
5. 在  get  和  set  方法中不要提及使用到属性描述符定义的对象属性，否则会陷入无限递归，导致栈溢出报错。
   
6. 数据描述符和存取描述符都具备  configurable 、 enumerable  属性。
   
7. 描述符不具备  value ， writable ， set  和  get  任意一个关键字都被认作一个数据描述符。
   
8. value  或  writable  和  get 、 set  不能同时存在，只要定义了  set  和  get  或其中一个就是一个存取描述符。
   
9. 属性描述符必须是数据描述符或者存取描述符两种形式之一，不能同时是两者。

下面是一个示例，展示了如何使用  Object.defineProperty()  方法来处理属性的默认值：
 

var obj = {};
Object.defineProperty(obj, 'x', {
  configurable: true,
  enumerable: true,
  writable: true,
  value: 0,
  getter: function() {
    return this._x;
  },
  setter: function(val) {
    if (typeof val !== 'number') {
      throw new TypeError('Invalid value');
    }
    this._x = val;
  }
});
 
console.log(obj.x); 
 
obj.x = 5;
 
console.log(obj.x);

 
 
在上述示例中，使用  Object.defineProperty()  方法定义了一个名为  myProperty  的属性，并设置了其默认值为  'Hello, World!' 。