zoukankan      html  css  js  c++  java
  • js中的访问器属性中的getter和setter函数实现数据双向绑定

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

  • 相关阅读:
    我的浏览器收藏夹分类
    我的浏览器收藏夹分类
    Java实现 LeetCode 318 最大单词长度乘积
    Java实现 LeetCode 318 最大单词长度乘积
    Java实现 LeetCode 318 最大单词长度乘积
    Java实现 LeetCode 316 去除重复字母
    Java实现 LeetCode 316 去除重复字母
    Java实现 LeetCode 316 去除重复字母
    Java实现 LeetCode 315 计算右侧小于当前元素的个数
    Java实现 LeetCode 315 计算右侧小于当前元素的个数
  • 原文地址:https://www.cnblogs.com/AngliaXu/p/7434835.html
Copyright © 2011-2022 走看看