码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-11-10 12:39:22      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:turn   div   value   第一个   col   实例   显示   object   obj   

再提一下什么是静态方法:
  静态方法:在类身上的方法,
  动态方法:在实例身上的方法
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*/

 

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

标签:turn   div   value   第一个   col   实例   显示   object   obj   

原文地址:https://www.cnblogs.com/MrZhujl/p/9938505.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!