js通过Object.defineProperty() 定义和控制对象属性

觊觎你的温柔

概述

　　用于给一个对象定义一个新属性或是修改某个现有属性，并返回此对象。Object.defineProperty(obj,prop,descriptor) 它接收 3 个参数，第 1 个是要定义属性的对象；第 2 个是要定义或修改的属性的属性名或 Symbol；第 3 个是对该属性的描述，称之为属性描述符，为一个对象，可以拥有 4 个 key。

• value：设置属性值，默认undefined；
  
• writable：是否可以重写，true | false，默认false；
  
• enumerable：目标属性是否可以被枚举，true | false，默认false；
  
• configerable：目标属性是否可以删除或者再次修改特性，true | false，默认false；
  

属性描述

• enumerable：描述该属性是否是可枚举的。如下例子，new 一个包含name和sex属性的person实例，然后通过Object.defineProperty()定义属性age, 然后通过for语句变量person对象的属性，看看效果：
  
• 1. let person={name:'feixue', sex:0};
  2. Object.defineProperty(person,'age',
  3. {
  4.     value:30,
  5.     enumerable:false
  6. })
  7. console.log(person);
  8. for(let key in person)
  9. {
  10.     console.log(key);
  11. }

  复制代码
  如下图，person有3个属性{name:'feixue',sex:0,age:30}。其中age是通过Object.defineProperty()定义的，enumerable设置false。 当遍历person时只能看到name和sex, 看不到age。 当enumerable设置true时，遍历person可以看到age属性(自行尝试)
  

 

• value：属性的值，可以设置和修改。注意：如果允许属性可修改，需要设置‘writable':true。示例如下，修改age的值，看看效果：
  
  
  
  • 1. 1 let person={name:'feixue', sex:0};
    2. 2 Object.defineProperty(person,'age',
    3. 3 {
    4. 4     value:30,
    5. 5     enumerable:false,
    6. 6     writable:true
    7. 7 })
    8. 8 console.log(person);
    9. 9 person.age=40;
    10. 10 console.log(person);

    复制代码
    如下图，age初始值是30，通过修改设置成40
    
    
    
  
  
• get /set : get设置属性值，get 获取属性值 
  
  
  
  • 1. 1 let person={name:'feixue', sex:0};
    2. 2 let _age=45;
    3. 3 Object.defineProperty(person,'age',
    4. 4 {
    5. 5     get:function()
    6. 6     {
    7. 7         return _age;
    8. 8     },
    9. 9     set(value)
    10. 10     {
    11. 11         _age=value;
    12. 12     }
    13. 13 })
    14. 14 console.log("age is "+person.age);
    15. 15 person.age=60;
    16. 16 console.log("age is "+person.age);

    复制代码
    如图所示，getter和setter可以写成get(){}/set(value){} 或者 get:function{}/set:function(value){} 。 当属性被获取时，会执行getter函数。当属性被设置时，会执行setter函数。
    
    
    
  
  

 
　请注意, 使用getter 和 setter ，就不可以设置value了。请看下面的示例，同时使用getter/setter 和 value会报什么错误？

• 
  
  
  
  • 1. 1 let person={name:'feixue', sex:0};
    2. 2 let _age=45;
    3. 3 Object.defineProperty(person,'age',
    4. 4 {
    5. 5     value:30,
    6. 6     get:function()
    7. 7     {
    8. 8         return _age;
    9. 9     },
    10. 10     set(value)
    11. 11     {
    12. 12         _age=value;
    13. 13     }
    14. 14 })
    15. 15 console.log(person);

    复制代码
  
  

　　　　　　　　此处同时使用了value和 getter/setter, 报错信息如下

另外，使用value和 getter/setter 还是有区别的， 请看下图, 2者有什么区别？ 如下图，图一使用了vue, 图二使用了getter/setter.

 

•  到此这篇关于js 通过Object.defineProperty() 定义和控制对象属性的文章就介绍到这了。欢迎光临我的博客：巨大的石头 - 博客园 (cnblogs.com)
  

　　　

来源:https://www.cnblogs.com/smallstone/p/18038659
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！