对象的数据属性和访问器属性

对象的数据属性和访问器属性

在javascript中的对象属性分为两种，一种是数据属性，一种是访问器属性。两种属性是不同的属性，他们构成了对象的属性。

解析：我们可以对对象中的属性设置数据属性和访问器属性。由这个图可以看出，当外界向对象请求属性的时候，会先经过访问器属性。当外界对属性进行更改的时候，也是经过访问器属性，然后访问器属性就会想对象属性请求数据属性，最终返回出去。
在平时我们如果设置访问器属性，可以起到排查的作用。

一、设置数据属性Object.defineProperty()

<script>
let person = {};
      Object.defineProperty(person,"name",{
        writable:false,
        value:"dongli",
        enumerable:true,
        configurable:false
      })
</script>

这里存在四个属性
①writeable：就是这个属性可不可以被更改，当值为true的时候，就是可以被更改,当只为false的时候，就是不可以被更改。
②value:就是设置这个对象属性的值。
③enumerable:设置对象属性是否可以遍历出来，当值为true，就是可以被遍历，反之不会。
④configurable:设置数据属性的值是否可以更改，就是在当设置属性值为false是，在后面的代码中不可以更改该对象属性的数据属性，反之则可以进行更改。

二、数据属性的Object.defineProperty()

<script>
    let obj = {
      name: "dongmuchen",
      age: "19",
      sex: "女",
    }
    Object.defineProperty(obj, "_address", {
      value: 20,
      writable: true,
      enumerable: false,
      configurable: false,
    })
    Object.defineProperty(obj, "address", {
      get: function () {
        return this._address;
      },
      set: function (value) {
        if (value > 10 && value < 60) {
          this._address = value
        } else {
          throw Error("address范围应该在10-65之间");
        }
      },
      enumerable: true,
      configurable: false,
    })
    obj.address = 30;
    console.log(obj);
  </script>

这里我们对设置了两个属性一个是__address，另一个是address，前一个是数据属性，后面的是访问器属性，当执行obj.address的时候，此时就会执行其中的get函数，get()函数就会访问对象中的 __address，从而取出其中的值进行返回。当我们执行obj.address = 30的时候，会执行set函数，首先进行判断，当满足条件是，进行值的更改，当不满足时，抛出错误。
属性设置
在访问器函数中也存在四个属性
① set（）;函数可以判断外界对属性进行更改是否可以满足条件。
② get():该函数就是外界获取属性值。
③enumerable:设置对象属性是否可以遍历出来，当值为true，就是可以被遍历，反之不会。
④configurable:设置数据属性的值是否可以更改，就是在当设置属性值为false是，在后面的代码中不可以更改该对象属性的数据属性，反之则可以进行更改。

三、Object.defineProperties()设置多个属性

<script>
 let person = {};
          Object.defineProperties(person,{
            name:{
              value:"dongmuchen",
            },
            _age:{
              value:"20",
              enumerable:false,
              configurable:false,
            },
            age:{
              get(){
                return this._age;
              },
              set(value){
                if(value>10 && value<60){
                  this._age = value;
                }
                else{
                  throw Error("age的范围出现错误");
                }
              },  
            }
          })
          console.log(person);
</script>

Object.defineProperties()可以设置多个属性，第一个参数是对象名，第二个参数传入的是一个对象，其中包含设置的属性值。

四、读取属性的特性Object.getOwnPropertyDescriptor()

<script>
 let person = {};
            Object.defineProperties(person,{
              name:{
                value:"dongmuchen",
                enumerable:true,
              },
              _age:{
                value:20,
                configurable:false,
                enumerable:false,
              },
              age:{
                get(){
                  return this._age;
                },
                set(value){
                  if(value<40 && value>15){
                    this._age = value;
                  }
                  else{
                    throw Error("年龄范围不对");
                  }
                },
                enumerable:true,
                configurable:false
              }
            })
            for(const x of Object.keys(person)){
              console.log(x);
            }
            let descName = Object.getOwnPropertyDescriptor(person,"name");
            console.log(descName);
            let descAge = Object.getOwnPropertyDescriptor(person,"_age");
            console.log(descAge);
            let descAge_2 = Object.getOwnPropertyDescriptor(person,"age");
            console.log(descAge_2);
</script>

最终结果：

给函数是读取对象属性的数据属性和访问器属性

五、Object.getOwnPropertyDescriptors(对象)

<script>
   let person = {};
            Object.defineProperties(person,{
              name:{
                value:"dongmuchen",
                enumerable:true,
              },
              _age:{
                value:20,
                configurable:false,
                enumerable:false,
              },
              age:{
                get(){
                  return this._age;
                },
                set(value){
                  if(value<40 && value>15){
                    this._age = value;
                  }
                  else{
                    throw Error("年龄范围不对");
                  }
                },
                enumerable:true,
                configurable:false
              }
            })
  console.log(Object.getOwnPropertyDescriptors(person));
</script>

使用 Object.getOwnPropertyDescriptors(person）可以返回对象的属性的全部设置
2020年1月9日总结