利用object.defineProperty实现数据与视图绑定
Posted 三十亿少女的梦
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用object.defineProperty实现数据与视图绑定相关的知识，希望对你有一定的参考价值。
如今比较火的mvvm框架，例如vue就是利用es5的defineProperty来实现数据与视图绑定的，下面我来介绍一下defineProperty的用法。
var people= {} Object.defineProperty(people,"name",{ value: \'lin\' }) console.log(people.name);//lin
可以看到defineProperty的基本用法就是给一个对象添加一个新属性。上面的代码就是给people对象添加了一个属性name，值为lin。
参数
第一个参数:目标对象
第二个参数:需要定义的属性或方法的名字。
第三个参数:目标属性所拥有的特性。
第三个参数可以设置以下属性。
value:属性的值
configurable:总开关，一旦为false，不能再设置，value，writable，configurable。
writable:如果为false，属性的值就不能被重写,只能为只读了
enumerable:是否能在for...in循环中遍历出来或在Object.keys中列举出来。
get:当属性(例如第一个例子的name属性)值被读的时候会触发该方法。
set:当属性(例如第一个例子的name属性)被设置新值时会触发该方法，这就是数据驱动视图的关键
注意：不能设置get 和 set的同时设置writable或value，否则会报错。
下面是一个简单的例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <textarea></textarea> <script> let obj = {}; Object.defineProperty(obj, "key", { get: function () { return document.querySelector(\'textarea\').innerHTML; //当取obj.key属性时，执行该方法，返回的是dom节点的值(这里为textarea的值) }, set: function (info) { document.querySelector(\'textarea\').innerHTML = info; //当设置obj.key属性时，执行该方法，对应修改dom节点的值(这里为textarea的值)
} });
obj.key = "嘻嘻嘻"; //这个赋值操作会触发set方法
</script>
</body>
</html>
效果如下：
可以看到，我给obj的key属性赋了新值“嘻嘻嘻”之后，dom中的textarea内容也变成了了“嘻嘻嘻”。
以上是关于利用object.defineProperty实现数据与视图绑定的主要内容，如果未能解决你的问题，请参考以下文章
defineReactive函数，利用闭包封装Object.defineProperty()
vue中实现双向数据绑定原理,使用了Object.defineproperty()方法,方法简单
从Object.definedProperty中看双向数据的绑定