对象-属性描述符

对象的增强知识补充

◼ 在前面我们的属性都是直接定义在对象内部，或者直接添加到对象内部的：
  但是这样来做的时候我们就不能对这个属性进行一些限制：比如这个属性是否是可以通过delete删除的？这个属性是否在forin遍历的时候被遍历出来呢？
◼ 如果我们想要对一个属性进行比较精准的操作控制，那么我们就可以使用属性描述符。
  通过属性描述符可以精准的添加或修改对象的属性；
  属性描述符需要使用Object.defineProperty 来对属性进行添加或者修改；

Object.defineProperty 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

◼ Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
Object.defineProperty(obj,prop,descriptor)
◼ 可接收三个参数：
  obj要定义属性的对象；
  prop要定义或修改的属性的名称或bol；
  descriptor要定义或修改的属性描述符；
◼ 返回值：
  被传递给函数的对象。

属性描述符分类

 ◼ 属性描述符的类型有两种：
    数据属性（Data Properties）描述符（Descriptor）；
    存取属性（Accessor访问器Properties）描述符（Descriptor）；
                configurable   enumberable   value      get     set
   数据属性描述符     可以            可以        可以    不可以   不可以
   存取属性描述符     可以            可以        不可以    可以      可以

数据属性描述符

◼ 数据数据描述符有如下四个特性：
◼ [[Configurable]]：表示属性是否可以通过delete删除属性，是否可以修改它的特性，或者是否可以将它修改为存取属性描述符；
    当我们直接在一个对象上定义某个属性时，这个属性的[[Configurable]]为true；
    当我们通过属性描述符定义一个属性时，这个属性的[[Configurable]]默认为false；
◼ [[Enumerable]]：表示属性是否可以通过for-in或者Object.keys()返回该属性；
    当我们直接在一个对象上定义某个属性时，这个属性的[[Enumerable]]为true；
    当我们通过属性描述符定义一个属性时，这个属性的[[Enumerable]]默认为false；
◼ [[Writable]]：表示是否可以修改属性的值；
    当我们直接在一个对象上定义某个属性时，这个属性的[[Writable]]为true；
    当我们通过属性描述符定义一个属性时，这个属性的[[Writable]]默认为false；
◼ [[value]]：属性的value值，读取属性时会返回该值，修改属性时，会对其进行修改；
    默认情况下这个值是undefined；

案例:

  <script>
    var obj = {
      name:"hdc",
      age:18
    }
    //精准控制
    Object.defineProperty(obj,"name",{
      configurable:false,//是否可以配置
      enumerable:false,//是否可以枚举
      writable:false,//只读属性无法更改
      value:"webKing"
    })
    delete obj.name
    console.log(obj)
    // 不可配置后不能再次进行配置
    // Object.defineProperty(obj,"name",{
    //   configurable:true,
    // })
    // 通过Object.defineProperty添加新的属性 默认configurable为false
    Object.defineProperty(obj,"address",{})  
    console.log(obj)
    /*
    ◼ [[Enumerable]]：表示属性是否可以通过for-in或者Object.keys()返回该属性；
        当我们直接在一个对象上定义某个属性时，这个属性的[[Enumerable]]为true；
        当我们通过属性描述符定义一个属性时，这个属性的[[Enumerable]]默认为false；
    */
    console.log(Object.keys(obj))//(2) ['name', 'age']

    /*
    ◼ [[Writable]]：表示是否可以修改属性的值；
      当我们直接在一个对象上定义某个属性时，这个属性的[[Writable]]为true；
      当我们通过属性描述符定义一个属性时，这个属性的[[Writable]]默认为false；
    */
    obj.name = "kobe"
    console.log(obj)//{age: 18, name: 'hdc', address: undefined}
    /*
    ◼ [[value]]：属性的value值，读取属性时会返回该值，修改属性时，会对其进行修改；
      默认情况下这个值是undefined；
    */
  console.log(obj)//{age: 18, name: 'webKing', address: undefined}
  </script>

存取属性描述符

◼ 数据数据描述符有如下四个特性：
◼ [[Configurable]]：表示属性是否可以通过delete删除属性，是否可以修改它的特性，或者是否可以将它修改为存取属性描述符；
  和数据属性描述符是一致的；
  当我们直接在一个对象上定义某个属性时，这个属性的[[Configurable]]为true；
  当我们通过属性描述符定义一个属性时，这个属性的[[Configurable]]默认为false；
◼ [[Enumerable]]：表示属性是否可以通过for-in或者Object.keys()返回该属性；
  和数据属性描述符是一致的；
  当我们直接在一个对象上定义某个属性时，这个属性的[[Enumerable]]为true；
  当我们通过属性描述符定义一个属性时，这个属性的[[Enumerable]]默认为false；
◼ [[get]]：获取属性时会执行的函数。默认为undefined
◼ [[set]]：设置属性时会执行的函数。默认为undefined

案例:
    <script>
    //vue2 响应式原理
    var obj = {
      name : "hdc",
      age : 18
    }
    // obj 对象中的name添加存储属性描述符
    var _name = ""
    Object.defineProperty(obj,"name",{
      configurable:true,
      enumerable:false,
      // 设置值
      set : function(value){
        console.log("set方法被调用了",value)
        _name = value
      },
      // 获取值
      get : function(){
        console.log("get方法被调用了")
        return _name
      }
    })
    obj.name = "kebo"
    obj.name = "kebo"
    obj.name = "kebo"
    obj.name = "kebo"
    obj.name = "kebo"
    obj.name = "kebo"
    /*
    set方法被调用了kebo
    set方法被调用了kebo
    set方法被调用了kebo
    set方法被调用了kebo
    set方法被调用了kebo
    set方法被调用了kebo
    */
  </script>

同时定义多个属性

Object.defineProperties() 方法直接在一个对象上定义 多个 新的属性或修改现有属性，并且返回该对象。
    <script>
    var obj = {
      name:"hdc",
      age : 18,
      address:"天津市"
    }
    //新增的方法
    Object.defineProperties(obj,{
      name:{
        configurable:true,
        enumerable:true,
        writable:false
      },
      age:{
        configurable:true,
        enumerable:true,
        writable:false
      }
    })
  </script>

对象方法补充

◼ 获取对象的属性描述符：
  getOwnPropertyDescriptor
  getOwnPropertyDescriptors
◼ 禁止对象扩展新属性：preventExtensions
  给一个对象添加新的属性会失败（在严格模式下会报错）；
◼ 密封对象，不允许配置和删除属性：seal
  实际是调用preventExtensions
  并且将现有属性的configurable:false
◼ 冻结对象，不允许修改现有属性：freeze
  实际上是调用seal
  并且将现有属性的writable: false

  案例:
  <script>
      var obj = {
        name:"hdc",
        age:18
      }
      //1.获取属性描述符
      console.log(Object.getOwnPropertyDescriptor(obj,"name"))
      console.log(Object.getOwnPropertyDescriptors(obj))

      //2.阻止对象扩展
      Object.preventExtensions(obj)
      obj.address = "天津市"
      console.log(obj)
      // 密封对象(不能进行配置)不能删除但是可以修改
      Object.seal(obj)
      obj.name = "kobe"
      delete obj.name
      console.log(obj) // {name: 'kobe', age: 18}
      // 冻结对象 // 不能修改和删除
      Object.freeze(obj)
      obj.name = "hdc"
      delete obj.name
      console.log(obj) // {name: 'kobe', age: 18}
  </script>