嗯，之前在读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版本的双向数据绑定，代码如下
 <body>

         <input type="text" id="inputs"/>

         <span id="span"></span>

         <script type="text/javascript">

             var j={

                 val:''

             }

             Object.defineProperty(j,'value',{

                 get:function(){

                     return this.val;

                 },

                 set:function(newValue){

                     this.val=newValue;

                 }

             })

             inputs.onkeyup=function(){

                 j.value=this.value;

                 span.innerHTML=j.val;

             }

         </script>

     </body>

　　有兴趣的同学可以尝试做一下领悟。附上红宝书此知识点在P143。

js中的访问器属性中的getter和setter函数实现数据双向绑定的更多相关文章

  1. 《js高级程序设计》6.1.1-6.1.3——数据属性、访问器属性

    数据属性:该属性包含了一个数据值的位置,它包含了4个描述行为的特性:1. [[Configurable]]:表示是否能通过delete删除属性从而重新定义属性,能否修改属性的特性,能否把属性修改为访问 ...

  2. javascript对象属性——数据属性和访问器属性

    ECMA-262第五版在定义时,描述了属性property的各种特征,定义这些特性是为了实现javascript引擎用的,为了表示该特性是内部值,规范把它们放在了两对儿方括号中,例如[[Enumera ...

  3. js中属性类型：数据属性与访问器属性

    js中属性类型分为两种:数据属性和访问器属性 在js中,对象都是由名值对构成的,名:就是我们所说的属性名,值就是属性对应的值(基本值.对象.方法). ECMA-262第5版定义了只有内部才用的特性,描 ...

  4. js对象的数据属性和访问器属性

    js面向对象 ECMA-262第5版在定义只有内部才用的特性(attribute)时,描述了属性(property)的各种特征.ECMA-262定义这些特性是为了实现javascript引擎用的,因此 ...

  5. JS的数据属性和访问器属性

    ECMA-262第5版在定义只有内部才用的特性(attribute)时,描述了属性(property)的各种特征.ECMA-262定义这些特性是为了实现javascript引擎用的,因此在javasc ...

  6. JavaScript 数据属性和访问器属性

    在JavaScript中对象被定义为"无序属性的集合,其属性可以包含基本值.对象或函数."通俗点讲,我们可以把对象理解为一组一组的名值对,其中值可以是数据或函数. 创建自定义对象通 ...

  7. JavaScript 属性类型（数据属性和访问器属性）

    数据属性 数据属性包含一个数据值的位置.在这个位置可以读取和写入值.数据属性有 4 个描述其行为的特性. [[Configurable]]:表示能否通过 delete 删除属性从而重新定义属性,能否修 ...

  8. JavaScript对象的两类属性（数据属性与访问器属性）

    对JavaScript来说,属性并非只是简单的名称和值,JavaScript用一组特征(attribute)来描述属性 (property). 第一类属性数据属性具有四个特征. value:就是属性的 ...

  9. Js中的数据属性和访问器属性

    Js中的数据属性和访问器属性 在javaScript中,对象的属性分为两种类型:数据属性和访问器属性. 一.数据属性 1.数据属性:它包含的是一个数据值的位置,在这可以对数据值进行读写. 2.数据属性 ...

随机推荐

  1. Windows10中“SQL Server 配置管理器”哪去了？

    SQL Server 配置管理器是一种工具,用于管理与 SQL Server 相关联的服务.配置 SQL Server 使用的网络协议以及从 SQL Server 客户端计算机管理网络连接配置.SQL ...

  2. Win8.1下VM与Hyper-v冲突解决方法

    不需要使用hyperv.去程序那里关闭hyperv.要同时使用两中虚拟机.使用折中的办法:  创建两个启动菜单,在启动的时候选择是否要运行 Hyper-V. 管理员身份运行命令提示符 cmd 输入 b ...

  3. 为何你跟着滴滴D8级前端大神撸代码，技术却依旧原地踏步？

    引子 听说最近有很多小伙伴,热衷于在慕课网上学习各种前端实战教程,并以完成项目为奋斗目标.比如本文接下来要提到的<Vue2.0高级实战之开发移动端音乐App>,这门课程的传授者是来自滴滴D ...

  4. 在linux中安装git，并将代码发布到github

    楼主Git小白,今天刚刚学习了git,虽然在工作中也许用不到,但是在学习的时候肯定会用到的,毕竟一个程序员首先就要整理自己的知识点,将美丽的代码分享与大家. 楼主是将Git安装在阿里云的centos7 ...

  5. JavaWeb开发技术基础概念回顾篇

    JavaWeb开发技术基础概念回顾篇 第一章 动态网页开发技术概述 1.JSP技术:JSP是Java Server Page的缩写,指的是基于Java服务器端动态网页. 2.JSP的运行原理:当用户第 ...

  6. kotlin-30分钟快速入门

    1.定义变量 在kotlin中,通过var 或者 val 来定义,区别就是 val定义的变量只能读不能修改,var则可以修改. val a:Int = 1 //等价于java: final int i ...

  7. call和apply和bind区别

    call和apply特征一样 都是用来调用函数 立即调用 但是可以在调用函数的同时 通过第一个参数指定函数内部this的指向 call 调用的时候 参数必须以参数列表的形式进行传递 也就是以逗号分隔的 ...

  8. JS遍历属性和方法

    引用原文:http://www.cnblogs.com/lishenglyx/archive/2008/12/08/1350573.html#undefined <script language ...

  9. OPNET中FIN，FOUT以及FRET的作用 分类： opnet 2014-05-12 16:07 144人阅读 评论(0) 收藏

    为了使一个用户定义的函数被执行,该函数必须与一个特殊的堆栈跟踪代码相连.堆栈跟踪技术靠在函数的入口点和出口点插入预处理器宏指令完成(一个函数只有一个入口点,但可以有多个出口点(由C语言的return声 ...

  10. 快学 Scala 入门 3 部曲

    1 基础 1.1 Scala 解释器 REPL - 交互式解释器环境 R(read).E(evaluate).P(print).L(loop) 输入值,交互式解释器会读取输入内容并对它求值,再返回结果 ...