标签：innerhtml 首页 his 返回 属性 绑定 利用 访问 双向
嗯，之前在读js红宝书的时候，在对象那一章有介绍属性类型。第一种数据类型指的是数据属性，第二种是访问器属性。在初识vue的时候，其双向数据绑定也是基于访问器属性中的getter和setter函数原理来实现的。本篇文章就着重解析这两个函数的工作原理。
var a={
_b=5;
};
1 Object.defineProperty(a,‘c‘,{
2 get:function(){
3 this._b=this._b-1
4 return this._b;
5 },
6 set:function(newValue){
7 return this._b=newValue;
8 }
9 })
console.log(a.c) //4
console.log(a.c) //3
a.c=10;
console.log(a._b,a.c);//10 9
当我们第一次读取a.c的时候，首页会进入get函数，get函数里面会返回4这个值，当第二次读取a.c的值，get函数返回3。
接着，设置a.c=10，进set函数设置a._b的值，此时a._b的值为10，然后进入get函数，读取get函数，a._b的值变成9；
1 <body>
2 <input type="text" id="inputs"/>
3 <span id="span"></span>
4 <script type="text/javascript">
5
6 var j={
7 val:‘‘
8 }
9 Object.defineProperty(j,‘value‘,{
10 get:function(){
11 return this.val;
12 },
13 set:function(newValue){
14 this.val=newValue;
15 }
16 })
17 inputs.onkeyup=function(){
18 j.value=this.value;
19 span.innerHTML=j.val;
20 }
21 </script>
22 </body>
有兴趣的同学可以尝试做一下领悟。附上红宝书此知识点在P143。
js中的访问器属性中的getter和setter函数实现数据双向绑定
标签：innerhtml 首页 his 返回 属性 绑定 利用 访问 双向
原文地址：http://www.cnblogs.com/AngliaXu/p/7434835.html
