Object.defineproperty方法(详解)

2 篇文章 0 订阅

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的话简单的说就是可以遍历获取该值

  •  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)就会被调用,且会收到修改的具体值

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

     

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Object.defineProperty是一个用来在一个对象上定义新属性或者修改已存在属性的方法。[2]它可以通过设置属性的描述符来控制属性的行为,包括属性的可枚举性、可配置性、可写性以及属性的值等。通过使用Object.defineProperty,我们可以实现对对象属性的监听和控制,从而实现双向数据绑定。 举个简单的例子,假设我们有一个名为person的对象,其中包含name和age两个属性,我们可以通过使用Object.defineProperty来添加一个新的属性sex,并设置它的值为男。代码如下: let person = { name:"码农", age: 18 } Object.defineProperty(person,'sex',{ value:"男" }) console.log(person) 运行以上代码,我们可以在控制台中看到person对象中已经添加了一个名为sex的属性,其值为男。这就是Object.defineProperty的基本用法。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue源码学习之Object.defineProperty对象属性监听](https://download.csdn.net/download/weixin_38663151/14904644)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Object.defineproperty方法(详解)](https://blog.csdn.net/weixin_57677300/article/details/126278467)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值