Object 的静态方法之 defineProperties 以及数据劫持效果

再提一下什么是静态方法:
  静态方法:在类身上的方法,
  动态方法:在实例身上的方法
Object.defineProperties(obj, props)

obj:被添加属性的对象
props:添加或更新的属性对象

给对象定义属性,
如果存在该属性,则用新定义的属性更新已存在的属性,
如果不存在该属性,则添加该属性。

如果是新添加的属性,一定要设置是否可枚举,不然为false
enumerable(是否可枚举):默认为false
writable(是否可写):默认为false
configurable:是否可delete


Object.defineProperty()
在对象上定义新属性,或修改对象现有属性,并返回该对象。

Object.defineProperty(obj, 属性名字, {设置属性})

例子1:
 1      let obj = {
 2          name:'xx',
 3          num:0
 4      };
 5      Object.defineProperties(obj,{
 6          name:{
 7              value:'yy',
 8              writable: false,//不可写
 9              enumerable: false,//不可遍历(枚举)
10              configurable:false//不可删除
11          },
12          age:{
13              value:20,
14              enumerable: true
15          }
16      });
17 
18      obj.age = 30;
19      console.log(obj.age);//默认不可写,所以此处依然是  20
20      delete obj.name;//此处删了一个不可删除的属性
21      console.log(obj.name);//当然能显示 yy

例子2:数据劫持 效果

 1      let obj = {
 2          num:4
 3      };
 4      let n = 2;
 5      Object.defineProperty(obj,'num',{
 6          get:function(){
 7              /*数据劫持*/
 8              //当你获取这个属性的时候,会调用
 9              n += 2;
10              return n;
11          }
12      });
13      console.log(obj.num < 5 && obj.num > 5);//true
14  /*num即小于5,又大于,就是应为,第一次判断obj.num时num=(n+=2)=4,符合了第一个条件,此时的n=4。
15 读到第二个判断的时候,再次出发函数,num再次=(n+=2)=8,又符合了第二个判断条件,所以出现了true*/

猜你喜欢

转载自www.cnblogs.com/MrZhujl/p/9938505.html