JS对象属性描述符对象和Object.defineProperty()

JS中Object对象的静态方法getOwnPropertyDescriptor可以返回指定对象的指定属性的描述,该描述是一个对象，称为属性描述符对象。属性描述符是 ECMAScript 5 新增的语法，它就是一个内部对象，用来描述对象的属性的特性。

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

• 数据描述符
  拥有value, writable, enumerable, configurable属性的描述符对象称为数据描述符

• 存取描述符。
  拥有get, set, enumerable, configurable属性的描述符对象称为存取描述符
  如通过Object.defineProperty方法修改上例中的对象p的name属性

  Object.defineProperty(p,'name',{
     get:function(){
         console.log('取值')
         return 'lilyan'
     }
   })
  

ps：不能同时设置value、writable和get 、set

描述符方法

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));

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'
   }
 })

Object.defineProperty方法是 ES5 中一个非常重要的特性，vue2就是通过这个方法实现响应式的。