OK,这一篇主要想说一下Object.defineProperty这个方法。这个方法也是Vue数据双向绑定原理的常见面试题所以也是有必要好好掌握的哦
首先我们知道JS中是支持面向对象编程的,也是有着对象和类这样的概念。我们常见创建对象的方法应该是这样:
![](https://img.haomeiwen.com/i27493437/b447920dc5a453e0.png)
那我们Object.defineProperty这个方法有什么用呢?这个方法接收三个参数:
1.属性所在的对象
2.属性的名字
3.一个描述符对象
这个描述符对象是个什么东西呢?
他可以是 数据属性:
1.configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性,默认值为false。
2.enumerable:表示能否通过for in循环访问属性,默认值为false
3.writable:表示能否修改属性的值。默认值为false。
4.value:包含这个属性的数据值。默认值为undefined。
现在我们就对p1这个对象,用这个方法来玩一下
![](https://img.haomeiwen.com/i27493437/f61c1be2001cabd2.png)
通过这个方法设置好configurable 这个属性,delete就不能把name属性给删除掉了。
![](https://img.haomeiwen.com/i27493437/13fb36d8cc1e29a9.png)
然后我们给p1这个对象新加了一个age属性,并且设置成只读的。
这样我们就无法修改这个age属性了。
![](https://img.haomeiwen.com/i27493437/35f32b2e0a8eb971.png)
在通过这个方法给enumerable设置为false,这样对象就不能通过迭代器遍历出age这个属性的值了。通过这几个例子,我们基本那就了解Object.defineProperty这个方法的使用以及数据属性是做什么的了。
那该方法的第三个参数除了可以是数据属性,也可以是访问器属性。
1.get:在读取属性时调用的函数,默认值是undefined 2..set:在写入属性的时候调用的函数,默认值是undefined现在我们来用这两个方法来实践一下:
![](https://img.haomeiwen.com/i27493437/83fbb700384d30d9.png)
由于get方法返回_year的值,set方法通过计算来确定正确的版本。
因此把year的值设置为2005会导致edition的值变为2.
OK,关于Object.defineProperty方法的第三个参数的两种属性也就说完了。
最后我们再说一下如何进行定义多个属性
![](https://img.haomeiwen.com/i27493437/4d97fade20e3bb9a.png)
OK,关于写法应该也没有什么难点。最后我在附上一个模拟Vue中v-module数据双向绑定原理的代码:
![](https://img.haomeiwen.com/i27493437/cfc1127dd8346a06.png)
网友评论