关于defineProperty使用方法(数据代理笔记理解)

(1)defineProperty说明:是Object上的一个方法,他能对对象进行属性的追加以实现数据代理,并对追加的属性进行一系列的删改。

(2)案例说明:对o2进行属性添加,属性Num,值为Num的值

//让o2拥有一个Num的属性,值为Num的值
let Num = 3
let o2 = {y:1}
//defineProperty可以接受到三个参数,第一个参数是所要添加对象,第二个为添加属性名,第三个为配置项,针对于添加属性所做的配置
Object.defineProperty(o2,'number',{
    value:Num//
    enumerable:true,//表示可以遍历默认false
    writable:true,//是否可以被修改默认false
    configurable:true,//是否可以被删除默认false
})

(3)案例2实现数据代理:对o2进行属性添加,属性x, 值为 o1.x的值,且o2.x的值改变会影响到o1属性x的值。也就是说现在可以通过o2改变o1,这就是数据代理,这里就是vue的数据代理所用到的原理

      // 数据代理:
      // 通过一个对象对另一个对象进行属性的更改,o2也能改掉o1的值
      let o1 = {x:1};
      let o2 = {y:3}
      Object.defineProperty(o2,'x',{
      //get函数(getter函数,习惯叫做getter函数)会在有人读取o2中x的值时触发,兵返回一个值,这个值就是x的值
         get(){
            return o1.x
         },
         set(value){
            // 当有人 这样做:o2.x=70 就会触发setter函数:所以执行收到70这个值,我们就靠这个值改掉o1的值
            o1.x = value
         }

      })

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值