嗯，之前在读js红宝书的时候，在对象那一章有介绍属性类型。第一种数据类型指的是数据属性，第二种是访问器属性。在初识vue的时候，其双向数据绑定也是基于访问器属性中的getter和setter函数原理来实现的。本篇文章就着重解析这两个函数的工作原理。
- 首先，我们先创建一个a对象，并给他定义了一个默认的属性_b,_b前面的下划线是一种常用的记号，用于表示只能通过对象方法访问的属性。
var a={
_b=5;
};- 接着定义一个属性为‘c‘的访问器属性，该属性包含一个get和set函数，get函数用来返回_b的值，set函数用来计算经处理过的_b的值，注意，访问器属性不能直接定义，必须使用Object.defineProperty()来定义。
1 Object.defineProperty(a,‘c‘,{2 ????get:function(){3 ????????this._b=this._b-14 ????????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；
- 利用这个原理，实现一个low版本的双向数据绑定，代码如下
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函数实现数据双向绑定
原文地址：http://www.cnblogs.com/AngliaXu/p/7434835.html