Object.defineproperty方法示例详解

 更新时间:2022年12月22日 12:54:32   作者:紫陌~  
Object.defineproperty 的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性,这篇文章主要介绍了Object.defineproperty方法,需要的朋友可以参考下

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

Object.defineproperty可以接收三个参数

Object.defineproperty(obj, prop, desc)

obj :  第一个参数就是要在哪个对象身上添加或者修改属性

prop : 第二个参数就是添加或修改的属性名

desc : 配置项,一般是一个对象

来一个简单的例子

 let  person = {
        name:"码农",
        age: 18
          }
          Object.defineProperty(person,'sex',{
            value:"男"
          })
          console.log(person)

 这不就是添加了

第三个参数里面还有6个配置控住属性

    writable:	是否可重写
 
    value:  	当前值
 
    get:    	 读取时内部调用的函数
 
	set:        写入时内部调用的函数
	
	enumerable: 	是否可以遍历
 
	configurable: 	是否可再次修改配置项
        let  person = {
        name:"码农",
        age: 18
          }
          Object.defineProperty(person,'sex',{
              value:"男",       //设置属性值
              enumerable:true, //控制属性是否可以枚举,默认值是false
              writable:true, //控制属性是否可以被修改,默认值是false
              configurable:true //控制属性是否可以被删除,默认值是false
          })
          console.log(person)

  • writable:true           控制属性是否可以被修改,控制台也看的当为TRUE的时候属性值可以被修改
  • configurable:true      控制属性是否可以被删除
  • enumerable:true      控制属性是否可以枚举,true的话简单的说就是可以遍历获取该值

还有最重要的两个属性 set和get(即存取器描述:定义属性如何被存取),这两个属性是干嘛的?

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

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

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

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

代码来看看

 let number = 18
        let person = {
            name:'码农',
            sex:'男',
        }
 
        Object.defineProperty(person,'age',{
            //当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
            get(){
                console.log('有人读取age属性了')
                return number
            },
            //当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
            set(value){
                console.log('有人修改了age属性,且值是',value)
                number = value
            }
        })
        console.log(person)

get:当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值

set:当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值

可以实现一个数据的联动效果

到此这篇关于Object.defineproperty方法的文章就介绍到这了,更多相关Object.defineproperty方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 解决webpack无法通过IP地址访问localhost的问题

    解决webpack无法通过IP地址访问localhost的问题

    下面小编就为大家分享一篇解决webpack无法通过IP地址访问localhost的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • js如何对元素可视区域进行判定

    js如何对元素可视区域进行判定

    在前端开发中,有时候我们需要判断一个元素是否在可视区域内,本文主要介绍了js如何对元素可视区域进行判定,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • dwr spring的集成实现代码

    dwr spring的集成实现代码

    需正确使用new和spring,注意两者的区别
    2009-03-03
  • Javascript中click与blur事件的顺序详析

    Javascript中click与blur事件的顺序详析

    这篇文章主要给大家介绍了关于Javascript中click与blur事件顺序的相关资料,文中介绍的非常详细,对大家学习或者使用Javascript中的click与blur事件具有一定的参考学习价值,需要的朋友可以下面来一起看看吧。
    2017-04-04
  • 使用Nginx部署前端项目的详细步骤记录

    使用Nginx部署前端项目的详细步骤记录

    在实际开发中我们通常会使用Nginx来部署前端静态页面,以提供快速访问速度和良好的用户体验,这篇文章主要给大家介绍了关于使用Nginx部署前端项目的详细步骤,需要的朋友可以参考下
    2024-08-08
  • JavaScript一元正号运算符示例代码

    JavaScript一元正号运算符示例代码

    这篇文章主要给大家介绍了关于JavaScript一元正号运算符的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • JavaScript Function函数类型介绍

    JavaScript Function函数类型介绍

    在JS中,Function(函数)类型实际上是对象;每个函数都是Function类型的实例;而且都与其他引用类型一样具有属性和方法
    2015-04-04
  • JS使用数组实现的队列功能示例

    JS使用数组实现的队列功能示例

    这篇文章主要介绍了JS使用数组实现的队列功能,结合实例形式分析了javascript基于数组的队列定义、元素添加、读取等相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • 微信小程序实现省市区三级地址选择

    微信小程序实现省市区三级地址选择

    这篇文章主要为大家详细介绍了微信小程序实现省市区三级地址选择,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • Ajax局部更新导致JS事件重复触发问题的解决方法

    Ajax局部更新导致JS事件重复触发问题的解决方法

    如果页面中包含一个ajax更新的列表,那么需要小心非动态更新部分的事件处理,下面以带有公共工具栏的列表界面为例
    2014-10-10

最新评论