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

Posted 2021-01-18 mrzhujl

再提一下什么是静态方法：

　　静态方法：在类身上的方法，
　　动态方法:在实例身上的方法

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*/