码迷,mamicode.com
首页 > Web开发 > 详细

js中的访问器属性中的getter和setter函数实现数据双向绑定

时间:2017-08-26 12:39:49      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:innerhtml   首页   his   返回   属性   绑定   利用   访问   双向   

  嗯,之前在读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-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;

  • 利用这个原理,实现一个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函数实现数据双向绑定

标签:innerhtml   首页   his   返回   属性   绑定   利用   访问   双向   

原文地址:http://www.cnblogs.com/AngliaXu/p/7434835.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!