Fork me on GitHub

Object.defineProperty的用法,给对象添加属性

Object.defineProperty的基本配置项 enumerable(是否可枚举也就是参与遍历),writable,configurable。

 1 <script type="text/javascript" >
 3             let person = {
 4                 name:'张三',
 5                 sex:'男',
 6             }
 7 
 8             Object.defineProperty(person,'age',{
 9                 value:18,
10                 enumerable:true, //控制属性是否可以枚举,默认值是false
11                 writable:true, //控制属性是否可以被修改,默认值是false
12                 configurable:true, //控制属性是否可以被删除,默认值是false
13
26             })
27 
28             console.log(Object.keys(person))//['name', 'sex', 'age']
29 
33             console.log(person)//{name: '张三', sex: '男', age: 18}35         </script>

高级配置项

 1 <script type="text/javascript" >
 2             let number = 18
 3             let person = {
 4                 name:'张三',
 5                 sex:'男',
 6             }
 7 
 8             Object.defineProperty(person,'age',{
10                 enumerable:true, //控制属性是否可以枚举,默认值是false
12                 configurable:true, //控制属性是否可以被删除,默认值是false
13 
14                 //当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
15                 get(){
16                     console.log('有人读取age属性了')
17                     return number
18                 },
19 
20                 //当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
21                 set(value){
22                     console.log('有人修改了age属性,且值是',value)
23                     number = value
24                 }
25 
26             })
27 
28             console.log(Object.keys(person))//['name', 'sex', 'age']
29 
30             console.log(person)
31         </script>

age可以实时获取动态更新,当number变时age也会拿到最新值

 

posted @ 2022-05-16 11:21  让梓航飞  阅读(168)  评论(0)    收藏  举报