Object.defineproperty方法的使用

defineproperty方法用来添加或修改对象的属性,共有三个参数obj(要添加或修改属性的对象名),prop(要添加或修改的属性名),descriptor(要添加或修改属性的配置项)

descriptor可取以下键值:

configurable:true|false 当值为true时属性的配置项才能够被改变,也能被删除,默认为false
enumerable:true|false 当值为true时才能被枚举,默认为false
value:属性对应的值
writable:true|false 当值为true时属性值才能被修改,默认为false
get:访问属性时,该方法会被执行,默认为undefined
set:修改属性值时,该方法会被触发,默认为undefined

该方法添加的属性在对对象进行遍历时是不会进入到迭代器中参加遍历的,也就是说不可枚举,如下所示,添加c后再遍历obj会发现只输出了a与b ,可证明由此方法添加的属性不可枚举。

var obj={
'a':1,
'b':2
}
Object.defineProperty(obj,'c',{
value:3
})
  for (var i in obj) {
        console.log(i)
    }

如何解决上面的问题,只需要在添加或修改属性时在其第三个参数中加入enumerable:true即可

另外,由defineProperty添加的属性也不能进行修改(obj.c=4是不能实现的),那么要如何更改才能使其能修改呢?只需要在第三个参数中加入writable:true即可

get方法

当读取school的room属性时,get函数(getter)就会被调用,且返回值就是room的值。以下方法可以实现对象中的某个属性关联某个变量,当变量值变的时候属性值也可以自动变化。

 var num='605'
    var school = {
        'teacher': 'zs',
        'student': 'ls'
    }
    Object.defineProperty(school, 'room', {
        get() {
            return num
        }
    })

因为get的返回值为num,所以当我改变num值再取room的值时,会发现room的值已经改变。

set方法

当修改school的属性时,set函数(setter)会被调用,且会收到修改的具体值

var num = '605'
    var school = {
        'teacher': 'zs',
        'student': 'ls'
    }
    Object.defineProperty(school, 'room', {
        get() {
            return num
        },
        set(val) {
            num = val
        }
    })

当在控制台为school.room赋值时,会调用set方法将值赋给num

什么是数据代理

通过一个对象代理对另一个对象中属性的操作(读/写)

基本原理:

  • 通过Object.defineProperty()把data对象中所有属性添加到vm上

  • 为每一个vm上的属性,都指定一个getter/setter

  • 在getter/setter内部去操作(读/写)data中对应的属性

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

进阶的菜熊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值