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()方法打印出来。
  • 9
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值