JS对象属性描述符对象

墨蓝 2022-10-18 12:59 266阅读 0赞

JS中Object对象的静态方法getOwnPropertyDescriptor可以返回指定对象的指定属性的描述,该描述是一个对象，称为属性描述符对象。属性描述符是 ECMAScript 5 新增的语法，它就是一个内部对象，用来描述对象的属性的特性。  
![在这里插入图片描述][20210708105458610.png]

<table> 
 <thead> 
  <tr> 
   <th>属性和方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>configurable</td> 
   <td>可配置性 ，是否可以使用delete删除属性，以及是否可以修改属性描述符的特性，默认值为true</td> 
  </tr> 
  <tr> 
   <td>enumerable</td> 
   <td>可枚举性，是否出现在对象的属性枚举中，比如是否可以通过for-in循环返回该属性，默认值为true</td> 
  </tr> 
  <tr> 
   <td>writable</td> 
   <td>可写性，是否可以修改属性的值，默认值为true</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td>属性值，默认值为undefined</td> 
  </tr> 
  <tr> 
   <td>get</td> 
   <td>取值方法，在取属性值时被调用，用于读取 value 属性值，默认为 undefined</td> 
  </tr> 
  <tr> 
   <td>set</td> 
   <td>存值方法，在设置属性值时被调用，用于设置 value 属性值，默认为 undefined。</td> 
  </tr> 
 </tbody> 
</table>

*  数据描述符  
    拥有value, writable, enumerable, configurable属性的描述符对象称为数据描述符
 *  存取描述符  
    拥有get, set, enumerable, configurable属性的描述符对象称为存取描述符  
    如通过Object.defineProperty方法修改上例中的对象p的name属性
    
        Object.defineProperty(p,'name',{ 
           get:function(){ 
               console.log('取值')
               return 'lilyan'
           }
         })

![在这里插入图片描述][20210708120920872.png]

# 描述符方法 #

Object对象属性描述符对象相关的静态方法：

1.  Object.getOwnPropertyDescriptor() 返回指定对象`某属性`的属性描述符对象;
2.  Object.getOwnPropertyDescriptors() 返回指定对象`所有自身属性`的描述对象。

var p={ 
        firstName:'Lily',
        age:18,
        lastName:'Li',
      }
      //设置属性firstName的访问器属性
      Object.defineProperty(p,'firstName',{ 
        get:function () { 
          return 'Lilyan'
        }
      })
      //打印出对象p的属性age对应的属性描述符对象
      console.log(Object.getOwnPropertyDescriptor(p,'age'));
      //打印出对象p的所有自有属性描述符对象
      console.log(Object.getOwnPropertyDescriptors(p));

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]

2、Object.defineProperty() 和Object.defineProperties() 用于添加/修改对象属性的描述

var p={ 
       firstName:'Lily',
       age:18,
       lastName:'Li'
     }
     //设置属性firstName的访问器属性
     Object.defineProperty(p,'firstName',{ 
       get:function () { 
         return 'Lilyan'
       },
       set:function (newVal) { 
       	 console.log('数据firstName被修改了')
         return 'Lilyan'
       }
     })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 1]

[20210708105458610.png]: /images/20221005/467a25ca13aa48a18bafdd4df5e06756.png
[20210708120920872.png]: /images/20221005/1a3b77898f7b4fd49d2ff7a535d4f75c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]: /images/20221005/6890aa06c25149f194e44df516ce6a0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 1]: /images/20221005/44c6a2471c6741c49fbbc03f3c7f0dad.png