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

这篇具有很好参考价值的文章主要介绍了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对象的属性,看看效果:
  • let person={name:'feixue', sex:0};
    Object.defineProperty(person,'age',
    {
        value:30,
        enumerable:false
    })
    console.log(person);
    for(let key in person)
    {
        console.log(key);
    }

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

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

 

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

      如下图,age初始值是30,通过修改设置成40

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

  • get /set : get设置属性值,get 获取属性值 
    •  1 let person={name:'feixue', sex:0};
       2 let _age=45;
       3 Object.defineProperty(person,'age',
       4 {
       5     get:function()
       6     {
       7         return _age;
       8     },
       9     set(value)
      10     {
      11         _age=value;
      12     }
      13 })
      14 console.log("age is "+person.age);
      15 person.age=60;
      16 console.log("age is "+person.age);

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

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

 

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

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

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

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

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

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

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

 

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

   文章来源地址https://www.toymoban.com/news/detail-837625.html

到了这里,关于js通过Object.defineProperty() 定义和控制对象属性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue2和vue3中双向数据绑定的原理,ES6的Proxy对象代理和JavaScript的Object.defineProperty,使用详细

    简介: Object.defineProperty大家都知道,是vue2中双向数据绑定的原理,它 是 JavaScript 中一个强大且常用的方法,用于定义对象属性,允许我们精确地控制属性的行为,包括读取、写入和删除等操作; 而Proxy是vue3中双向数据绑定的原理,是ES6中一种用于创建代理对象的特殊对象,

    2024年02月15日
    浏览(47)
  • JavaScript之Object.defineProperty()

    经常使用的定义与赋值方法 obj.prop =value 或者 obj[\\\'prop\\\']=value Object.defineProperty() 的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性 obj 需要定义属性的当前对象 prop 当前需要定义的属性名 desc 属性描述符 一般通过为对象的属性赋值的情况下,对象的属

    2024年02月09日
    浏览(36)
  • Vue中的Object.defineProperty详解

    Vue中的Object.defineProperty是一个比较重要的方法,它是可以定义对象中属性的一个方法,相比于在对象中直接定义的对象,它更具有灵活性。 直接定义对象中的属性是这样的: 而Object.defineProperty可以直接在上面的对象中添加属性,如下面所示: 如果用上面的方法进行定义属性

    2024年02月13日
    浏览(37)
  • 详解vue中的Object.defineProperty

       如果想要age遍历的话 就设置属性 打印出来 发现有可以枚举的属性age  参考课程: 011_尚硅谷Vue技术_Object.defineProperty_哔哩哔哩_bilibili   // 1.Vue中的数据代理:     //    通过Vm对象来代理data对象中属性的操作(读/写)     // 2.Vue中数据代理的好处:     //   更加方便的

    2024年02月04日
    浏览(42)
  • 使用object.defineProperty来更新数据示例

    vue+element UI 第001个 查看专栏目录: 按照VUE知识点 ------ 按照element UI知识点 echarts,openlayers,cesium,leaflet,mapbox,d3,canvas 免费交流社区 专栏目标 在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。 (1)提供vue2的一些基本操

    2024年02月06日
    浏览(31)
  • 【javaScript】Proxy与Object.defineProperty的区别

    Proxy和Object.defineProperty都是JavaScript中用于实现对象属性拦截和代理的机制,但它们在功能和应用方面有一些区别。 Object.defineProperty:它是 ES5 引入的属性定义方法,通过直接定义对象属性的特性(如可枚举性、可写性等),可以拦截属性的读取、写入和删除操作。但它 只能拦

    2024年02月08日
    浏览(39)
  • ts定义对象类型Record<string, any>;和object、Object的区别

    Record 是 TS 内置的一个高级类型,是通过映射类型的语法来生成索引类型的 比如传入 \\\'a\\\' | \\\'b\\\' 作为 key,1 作为 value,就可以生成这样索引类型: 所以这里的 Recordstring, any 也就是 key 为 string 类型,value 为任意类型的索引类型,可以代替 object 来用,更加语义化一点: Record 与

    2024年02月16日
    浏览(38)
  • typescript 对象的属性定义

    [propName: string] :表示对象属性可以是任意值

    2024年02月21日
    浏览(33)
  • 【JS】js给对象动态添加、设置、删除属性名和属性值

    js中访问对象属性一共有两种方法:点获取法和方括号获取法。 使用点符号访问属性值 alert( user.name ); // John 使用方括号访问属性值 alert( user[name]); // John 注意: 如果我们遍历一个对象,我们获取属性的顺序是和属性添加时的顺序相同吗? 简短的回答是:“有特别的顺序”:整

    2023年04月13日
    浏览(49)
  • js向对象添加属性

    1、使用 对象.属性名 添加 2、使用 对象[属性名]添加 3、使用 prototype添加

    2024年02月09日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包