当前位置:   article > 正文

详解Object.defineProperty()方法_微信小程序object.defineproperty()

微信小程序object.defineproperty()

        Object.defineProperty是一个用于定义或修改对象属性的方法。它提供了一种更底层和灵活的方式来定义属性,可以设置属性的配置(如可枚举性、可配置性、可写性等),并且可以定义属性的getter和setter函数。

语法:

Object.defineProperty(obj, prop, descriptor)

 参数说明:

        - `obj`:要定义属性的对象

        - `prop`:要定义或修改的属性名称。

        - `descriptor`:一个描述符对象,用于定义或修改属性的特性。它有以下可选的键值:

                - `value`:属性的值,默认为`undefined`。

                - `writable`:属性的可写性。默认为`false`,即该属性为只读属性。

                - `enumerable`:属性的可枚举性。默认为`false`,即该属性不可枚举。

                - `configurable`:属性的可配置性。默认为`false`,即该属性不可被删除。         

                - `get`:获取属性值的函数。

                - `set`:设置属性值的函数。

直接看代码:

没有设置writable、enumerable、configurable属性,默认都为false,age属性不可枚举,不可修改,不可删除。

  1. let person = {
  2. name: "张三",
  3. sex: "男",
  4. };
  5. Object.defineProperty(person, 'age', {
  6. value: 18,
  7. })
  8. console.log(person); // {name: '张三', sex: '男', age: 18}
  9. for (p in person) { // 这里由于Object.defineProperty中没有设置enumerable:true,所以age属性不会参与枚举遍历
  10. console.log(p);
  11. // name
  12. // sex
  13. }
  14. person.age = 19; // 这里由于Object.defineProperty中没有设置writable:true,所以修改不会生效
  15. console.log(person); // {name: '张三', sex: '男', age: 18}
  16. delete person.age; // 这里由于Object.defineProperty中没有设置configurable:true,所以删除不会生效
  17. console.log(person); // {name: '张三', sex: '男', age: 18}

此时修改是person对象上的age值是无效的,值实际上没有更新  

设置了writable、enumerable、configurable属性的值为true之后,age属性可以被枚举,可以被修改,可以被删除。 

  1. let person = {
  2. name: "张三",
  3. sex: "男",
  4. };
  5. Object.defineProperty(person, "age", {
  6. value: 18,
  7. enumerable: true, //控制属性是否可以枚举,默认值是false
  8. writable: true, //控制属性是否可以被修改,默认值是false
  9. configurable: true, //控制属性是否可以被删除,默认值是false
  10. });
  11. console.log(person); // {name: '张三', sex: '男', age: 18}
  12. for (p in person) {
  13. // 这里由于Object.defineProperty中设置了enumerable:true,所以age属性参与了枚举遍历
  14. console.log(p);
  15. // name
  16. // sex
  17. // age
  18. }
  19. person.age = 19; // 这里由于Object.defineProperty中设置了writable:true,所以修改生效了
  20. console.log(person); // {name: '张三', sex: '男', age: 19}
  21. delete person.age; // 这里由于Object.defineProperty中设置了configurable:true,所以删除生效了
  22. console.log(person); // {name: '张三', sex: '男'}

 Object.defineProperty  还可以设置getter和setter方法

  1. let number = 18;
  2. let person = {
  3. name: "张三",
  4. sex: "男",
  5. };
  6. // 此外 Object.defineProperty 还可以设置getter和setter方法
  7. Object.defineProperty(person, "age", {
  8. // value:18,
  9. // enumerable:true, //控制属性是否可以枚举,默认值是false
  10. // writable:true, //控制属性是否可以被修改,默认值是false
  11. // configurable:true, //控制属性是否可以被删除,默认值是false
  12. //当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
  13. get() {
  14. console.log("有人读取age属性了");
  15. return number;
  16. },
  17. //当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
  18. set(value) {
  19. console.log("有人修改了age属性,且值是", value);
  20. number = value;
  21. },
  22. });
  23. console.log('person', person);
  24. console.log('number', number);

注意事项:

         Object.defineProperty() 设置了getter和setter方法之后,就不能再设置value属性,否则控制台报错:Uncaught TypeError: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute, #<Object>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Monodyee/article/detail/123839
推荐阅读
相关标签
  

闽ICP备14008679号