ES6访问器属性、defineProperty用法

1. 属性分类

• ES6中的对象，就是属性的集合
• 属性分为两类：
  • 命名属性：
    • 数据属性
    • 访问器属性
  • 内部属性（ES内部定义）

2. 数据属性

• 数据属性就是专门存储对象的一个属性值的属性
• 数据属性可以在创建对象时就定义好，也可以在创建完对象后，采用赋值方式增加新数据属性，添加的属性随时可以修改、遍历

//创建对象时定义数据类型
var person={
  name:"Tom"
}
//通过赋值方式添加新属性
person.age=20;

3. 属性的特性

3.1 属性的特性及获取属性的特性

• 数据属性有四个特性来保护自己不被随意修改、遍历
  • value: 实际存储属性值的特性
  • writable: 表示能否修改属性的value值。默认为true。如果设置为false则为只读属性
  • enumerable: 表示是否能通过for…in循环遍历到该属性。默认为true
  • configurable: 表示是否能通过delete删除该属性，或者能否修改其他特性。默认为true，如果改为false，则属性的其他特性一旦定义就不可修改
• 属性的特性无法直接访问。使用Object.getOwnPropertyDesciptor方法可以查看指定对象、指定属性的特性

console.log(Object.getOwnPropertyDescriptor(person,"name"));

3.2 设置属性的特性

• 通过Object.defineProperty方法修改属性的特性
• 增加数据属性，同时定义属性的特性：
  语法：
  Object.defineProperty(obj,“属性值”,{
   value:属性值,
   write:true/false
  …
  })
• 如果指定的属性名已存在，则直接修改原属性的特性
• Object.defineProperty方法一次只能添加或者设置一个属性，Object.defineProperties方法，一次可以设置多个属性

3.3 用Object.defineProperty设置属性特性

	var eric={
      eid:1001, //只读
      ename:"艾力克",  //禁止删除
      salary:12000  //禁止遍历
    }
    Object.defineProperty(eric,"eid",{
      writable:false,
      configurable:false
    });
    Object.defineProperty(eric,"ename",{
      configurable:false
    });
    Object.defineProperty(eric,"salary",{
      enumerable:false,
      configurable:false
    });

3.4 用Object.defineProperties设置属性特性

	Object.defineProperties(eric,{
      eid:{
        writable:false,
        configurable:false
      },
      ename:{
        configurable:false
      },
      salary:{
        enumerable:false,
        configurable:false
      }
    })

4. 访问器属性

4.1 访问器属性的相关概念

• 访问器属性是专门控制对一个数据属性读写操作的特殊属性。它不包含具体的属性值，而是包含一对儿get/set方法
• 访问器属性不能直接定义，只能通过Object.defineProperty/Object.defineProperties方法

4.2 访问器属性的特性

• 访问器属性没有value和writable特性
• 访问器属性的特性：
  • get：读取属性时自动调用的函数。如果不提供，表示不可读取受保护的属性值
  • set: 写入属性值自动调用的函数。如果不提供，表示受保护的属性为只读属性
  • enumerable: 表示是否能通过for…in循环遍历到该属性。默认为true
  • configurable: 表示是否能通过delete删除该属性，或者能否修改其他特性。默认为true，如果改为false，则属性的其他特性一旦定义就不可修改

4.3 访问器属性的用法示例

    var eric={
      ename:"艾力克",
      eage:25
      //年龄属性可以修改，但是必须介于18~65之间
    };
    Object.defineProperties(eric,{
      _eage:{
        value:eric.eage,
        writable:true
        //这里enumerable和configurable特性默认为false，可以省略不写
      },
      eage:{
        get:function(){
          return this._eage;
        },
        set:function(value){
          if(value>=18 && value<=65){
            this._eage=value;
          }else{
            throw Error("年龄必须介于18~65岁之间");
          }
        },
        enumerable:true,
        configurable:false
      }
    });
    console.log(eric.eage);//25
    eric.eage=18;
    console.log(eric.eage);//18
    eric.eage=16;
    console.log(eric.eage);//超出范围，报错

注意：

• 凡是用对象字面量创建添加的属性，其属性的特性值默认都是true；
• 使用defineProperty添加的属性，其属性的特性值默认都是false。

4.4 ES6中的class用get/set访问器属性实现虚拟扩展属性

还是同样的栗子~

   class Emp{
    constructor(name,age){
      this.name=name;
      this.age=19;
      Object.defineProperty(this,"_eage",{
        value:this.age,
        writable:true,
        enmerable:false,
        configurable:false
      })
    }
    get age(){
      return this._eage;
    }
    set age(v){
      if(v>18){
        this._eage=v
      }else{
        throw Error("18禁");
      }
    }
   }
   var e=new Emp('tom',28)
   console.log(e)
   e.age=49
   console.log(e.age)

5. 内部属性

• 内部属性是ES6内部定义，用于描述对象特定情况下的行为
• 比如：
  • 继承：__ proto __应用当前对象继承的原型对象
  • 可扩展：Extensible表示是否能为对象扩展新属性
  • class属性：对象的类型名。不能直接访问，而是通过强行调用Object.prototype.toString()方法打印出来。