Object.defineProperty()的基本用法,以及数据双向绑定的简单理解。
Object.defineProperty(object,属性名,属性描述符)
什么是属性描述符?
简单来说就是属性的‘配置项’,可以设置属性是否可以重写,枚举等
每个对象声明的时候,都带有默认的属性描述符
属性描述符有6个配置项
举个例子:
1 | var obj = { name:'haha'} |
这里只用到4个配置项,其中writable、value是一组,用来规定属性的值以及修改值的配置。
但其实还有另外一组:setter/getter(名字叫这个,但用起来是set()/get()),这两组配置是互斥的,只能声明其中一组。
属性描述符的作用
显/隐式声明变量的不同
1 | var a = 5 |
可以猜测,a是不可配置的,b是可以配置的,浏览器测试一下:
利用Object.getOwnPropertyDescriptor(object,属性名)
来提取属性描述符:
可以看到,符合猜想。
数据双向绑定的实现
什么是数据劫持?
还是上面的例子:
1 | var obj = { name:'haha'} |
Object.defineProperty()
为属性描述符里提供了set()
和get()
方法,用来配置属性值的修改和获取。
但我们可以从这两个函数里获取即将设置的newValue
。
具体简单实现
1 |
|
当然,vue的双向绑定肯定比这里更复杂,这里不做更多分析。(¦3[▓▓]
– 后续更:vue双向绑定的具体实现
- 本文链接: https://anyway521.gitee.io/post/d6ec9071.html
- 最后更新:
- 版权声明: 博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议进行许可,转载请注明出处!