devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Object.defineProperty()详解_object.definepropert()

作者：繁依Fanyi0 | 2024-02-21 12:41:31

赞

踩

object.definepropert()

讲解一：

个人感觉更加通俗易懂点。

Object.defineproperty 的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性

Object.defineproperty 参数

Object.defineproperty方法需要传递3个参数

Object.defineproperty（obj, prop, desc ）

参数1：obj 需要定义属性的当前对象

参数2：prop 当前需要定义的属性名

参数3：desc 描述符 一般是一个对象

一般通过为对象的属性赋值的情况下，对象的属性可以修改也可以删除，但是通过Object.defineProperty()定义属性，通过描述符的设置可以进行更精准的控制对象属性。

  1. Object.defineProperty(person,'age',{
  2.     value:18, // 属性值
  3.     enumerable:true, //控制属性是否可以枚举，默认值是false
  4.     writable:true, //控制属性是否可以被修改，默认值是false
  5.     configurable:true //控制属性是否可以被删除，默认值是false
  6. })

最后还有最重要的两个属性 set和get（即存取器描述：定义属性如何被存取），这两个属性是做什么用的呢？

注意：当使用了getter或setter方法，不允许使用writable和value这两个属性(如果使用，会直接报错滴)

　　get 是获取值的时候的方法，类型为 function ，获取值的时候会被调用，不设置时为 undefined

　　set 是设置值的时候的方法，类型为 function ，设置值的时候会被调用，undefined

　　get或set不是必须成对出现，任写其一就可以

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>Object.defineproperty方法</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript" >
  9.             let number = 18
  10.             let person = {
  11.                 name:'张三',
  12.                 sex:'男',
  13.             }
  14.  
  15.             Object.defineProperty(person,'age',{
  16.                 // value:18,
  17.                 // enumerable:true, //控制属性是否可以枚举，默认值是false
  18.                 // writable:true, //控制属性是否可以被修改，默认值是false
  19.                 // configurable:true //控制属性是否可以被删除，默认值是false
  20.  
  21.                 //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
  22.                 get(){
  23.                     console.log('有人读取age属性了')
  24.                     return number
  25.                 },
  26.  
  27.                 //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
  28.                 set(value){
  29.                     console.log('有人修改了age属性，且值是',value)
  30.                     number = value
  31.                 }
  32.  
  33.             })
  34.  
  35.             // console.log(Object.keys(person))
  36.  
  37.             console.log(person)
  38.         </script>
  39.     </body>
  40. </html>

讲解二：

菜菜： “老大，那个， Object.defineProperty 是什么鬼？”

假设我们有个对象 user ; 我们要给它增加一个属性 name , 我们会这么做　

  1. var user = {};
  2. user.name="狂奔的蜗牛";
  3. console.log(user);//{name: "狂奔的蜗牛"}

如果想要增加一个sayHi方法叻？

  1. user.sayHi=function () { console.log("Hi !") };
  2. console.log(user);//{name: "狂奔的蜗牛", sayHi: ƒn}

Object.defineProperty 就是做这个的

那么Object.defineProperty 怎么用？

Object.defineProperty 需要三个参数（object , propName , descriptor）

  1. object 对象 => 给谁加

  1. propName 属性名 => 要加的属性的名字 【类型：String】

  1. descriptor 属性描述 => 加的这个属性有什么样的特性【类型：Object】

那么descriptor这个是个对象 ，他有那些属性呢 ? 别着急我们一个一个说；

既然可以给一个对象增加属性，那么我们用它来做一下给 user添加 name属性，代码是这样的

  1. var user = {};
  2. Object.defineProperty(user,"name",{
  3.  value:"狂奔的蜗牛"
  4. })
  5. console.log(user);//{name: "狂奔的蜗牛"}

说明 是的还是那个经典的value属性，他就是设置属性值的。

  1.  
  2. var user = {};
  3. Object.defineProperty(user,"name",{
  4.  value:"狂奔的蜗牛"
  5. })
  6. Object.defineProperty(user,"isSlow",{
  7.  value:true
  8. })
  9. Object.defineProperty(user,"sayHi",{
  10.  value:function () { console.log("Hi !") }
  11. })
  12. Object.defineProperty(user,"age",{
  13.  value:12
  14. })
  15. Object.defineProperty(user,"birth",{
  16.  value:{
  17.   date:"2018-06-29",
  18.   hour:"15:30"
  19.  }
  20. })
  21. console.log(user);

说明 事实证明任何类型的数据都是可以的哦~

问题又来了，如果 user对象已经有了name属性，我们可以通过Object.defineProperty改变这个值吗？

我们来试试

  1.  
  2. var user = {};
  3. Object.defineProperty(user,"name",{
  4.  value:"狂奔的蜗牛"
  5. })
  6. console.log(user);
  7. user.name="新=>狂奔的蜗牛"
  8. console.log(user);

咦？？为什么我改了没作用勒？？

原因：上边说了descriptor有很多属性，除了value属性还有个 writable【顾名思义属性是否可以被重新赋值】接受数据类型为 boolean（默认为false） true => 支持被重新赋值 false=>只读

哦哦，原来如果我没设置writable值的时候就默认只读啊，所以才改不掉

那我们看看，设置为true，是不是就可以改掉了。

  1.  
  2. var user = {};
  3. Object.defineProperty(user,"name",{
  4.  value:"狂奔的蜗牛",
  5.  writable:true
  6. })
  7. console.log(user);
  8. user.name="新=>狂奔的蜗牛"
  9. console.log(user);

如果我们使用 Object.的方式定义属性会发生什么呢？我们来看下输出

  1.  
  2. var user ={
  3.  name:"狂奔的蜗牛",
  4.  age:25
  5. } ;
  6.  
  7. //es6
  8. var keys=Object.keys(user)
  9. console.log(keys);// ['name','age']
  10. //es5
  11. var keys=[];
  12. for(key in user){
  13.  keys.push(key);
  14. } 
  15. console.log(keys);// ['name','age']

说明　很明显，我们定义为　enumerable=false的birth属性并没有被遍历出来，遍历 => 其实就是枚举（个人理解啦，不喜勿喷哦~）

总结　enumerable 属性取值为 布尔类型 true | false 默认值为 false，为真属性可以被枚举；反之则不能。此设置不影响属性的调用和 查看对象的值。

configurable 是接下来我们要讲的一个属性，这个属性有两个作用：

1 属性是否可以被删除

2 属性的特性在第一次设置之后可否被重新定义特性

  1. ar user ={
  2.  name:"狂奔的蜗牛",
  3.  age:25
  4. } ;
  5. //定义一个性别 不可以被删除和重新定义特性
  6. Object.defineProperty(user,"gender",{
  7.  value:"男",
  8.  enumerable:true,
  9.  configurable:false
  10. })
  11.  
  12. //删除一下
  13. delete user.gender;
  14. console.log(user);//{name: "狂奔的蜗牛", age: 25, gender: "男"}
  15.  
  16. //重新定义特性
  17. Object.defineProperty(user,"gender",{
  18.  value:"男",
  19.  enumerable:true,
  20.  configurable:true
  21. })
  22. // Uncaught TypeError: Cannot redefine property: gender
  23. //会报错，如下图

设置为 true

  1.  
  2. var user ={
  3.  name:"狂奔的蜗牛",
  4.  age:25
  5. } ;
  6. //定义一个性别 可以被删除和重新定义特性
  7. Object.defineProperty(user,"gender",{
  8.  value:"男",
  9.  enumerable:true,
  10.  configurable:true
  11. })
  12.  
  13. //删除前
  14. console.log(user);
  15. // {name: "狂奔的蜗牛", age: 25, gender: "男"}
  16.  
  17. //删除一下
  18. delete user.gender;
  19. console.log(user);
  20. // {name: "狂奔的蜗牛", age: 25}
  21.  
  22. //重新定义特性
  23. Object.defineProperty(user,"gender",{
  24.  value:"男",
  25.  enumerable:true,
  26.  configurable:false
  27. })
  28.  
  29. //删除前
  30. console.log(user);
  31. // {name: "狂奔的蜗牛", age: 25, gender: "男"}
  32. //删除一下 删除失败
  33. delete user.gender;
  34. console.log(user);
  35. // {name: "狂奔的蜗牛", age: 25, gender: "男"}

总结 configurable设置为 true 则该属性可以被删除和重新定义特性；反之属性是不可以被删除和重新定义特性的，默认值为false（Ps.除了可以给新定义的属性设置特性，也可以给已有的属性设置特性哈）

最后我们来说说，最重要的两个属性 set和get（即存取器描述：定义属性如何被存取），这两个属性是做什么用的呢？我们通过代码来看看

  1.  
  2. var user ={
  3.  name:"狂奔的蜗牛"
  4. } ;
  5. var count = 12;
  6. //定义一个age 获取值时返回定义好的变量count
  7. Object.defineProperty(user,"age",{
  8.  get:function(){
  9.   return count;
  10.  }
  11. })
  12. console.log(user.age);//12
  13.  
  14. //如果我每次获取的时候返回count+1呢
  15. var user ={
  16.  name:"狂奔的蜗牛"
  17. } ;
  18. var count = 12;
  19. //定义一个age 获取值时返回定义好的变量count
  20. Object.defineProperty(user,"age",{
  21.  get:function(){
  22.   return count+1;
  23.  }
  24. })
  25. console.log(user.age);//13

接下来我不用解释了吧，你想在获取该属性的时候对值做什么随你咯~

来来来，我们看看 set，不多说上代码

  1.  
  2. var user ={
  3.  name:"狂奔的蜗牛"
  4. } ;
  5. var count = 12;
  6. //定义一个age 获取值时返回定义好的变量count
  7. Object.defineProperty(user,"age",{
  8.  get:function(){
  9.   return count;
  10.  },
  11.  set:function(newVal){
  12.   count=newVal;
  13.  }
  14. })
  15. console.log(user.age);//12
  16. user.age=145;
  17. console.log(user.age);//145
  18. console.log(count);//145
  19.  
  20. //等等，如果我想设置的时候是 自动加1呢？我设置145 实际上设置是146
  21.  
  22. var user ={
  23.  name:"狂奔的蜗牛"
  24. } ;
  25. var count = 12;
  26. //定义一个age 获取值时返回定义好的变量count
  27. Object.defineProperty(user,"age",{
  28.  get:function(){
  29.   return count;
  30.  },
  31.  set:function(newVal){
  32.   count=newVal+1;
  33.  }
  34. })
  35. console.log(user.age);//12
  36. user.age=145;
  37. console.log(user.age);//146
  38. console.log(count);//146

说明 注意：当使用了getter或setter方法，不允许使用writable和value这两个属性(如果使用，会直接报错滴)

get 是获取值的时候的方法，类型为 function ，获取值的时候会被调用，不设置时为 undefined

set 是设置值的时候的方法，类型为 function ，设置值的时候会被调用，undefined

get或set不是必须成对出现，任写其一就可以

  1.  
  2. var user ={
  3.  name:"狂奔的蜗牛"
  4. } ;
  5. var count = 12;
  6. //定义一个age 获取值时返回定义好的变量count
  7. Object.defineProperty(user,"age",{
  8.  get:function(){
  9.   console.log("这个人来获取值了！！");
  10.   return count;
  11.  },
  12.  set:function(newVal){
  13.   console.log("这个人来设置值了！！");
  14.   count=newVal+1;
  15.  }
  16. })
  17. console.log(user.age);//12
  18. user.age=145;
  19. console.log(user.age);//146

【完结】

Object.defineProperty方法直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象

  1. value: 设置属性的值
  2. writable: 值是否可以重写。true | false
  3. enumerable: 目标属性是否可以被枚举。true | false
  4. configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false
  5. set: 目标属性设置值的方法
  6. get：目标属性获取值的方法    　　
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/123837
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号