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版本的双向数据绑定，代码如下
<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函数实现数据双向绑定的更多相关文章
- 《js高级程序设计》6.1.1-6.1.3——数据属性、访问器属性
数据属性:该属性包含了一个数据值的位置,它包含了4个描述行为的特性:1. [[Configurable]]:表示是否能通过delete删除属性从而重新定义属性,能否修改属性的特性,能否把属性修改为访问 ...
- javascript对象属性——数据属性和访问器属性
ECMA-262第五版在定义时,描述了属性property的各种特征,定义这些特性是为了实现javascript引擎用的,为了表示该特性是内部值,规范把它们放在了两对儿方括号中,例如[[Enumera ...
- js中属性类型：数据属性与访问器属性
js中属性类型分为两种:数据属性和访问器属性 在js中,对象都是由名值对构成的,名:就是我们所说的属性名,值就是属性对应的值(基本值.对象.方法). ECMA-262第5版定义了只有内部才用的特性,描 ...
- js对象的数据属性和访问器属性
js面向对象 ECMA-262第5版在定义只有内部才用的特性(attribute)时,描述了属性(property)的各种特征.ECMA-262定义这些特性是为了实现javascript引擎用的,因此 ...
- JS的数据属性和访问器属性
ECMA-262第5版在定义只有内部才用的特性(attribute)时,描述了属性(property)的各种特征.ECMA-262定义这些特性是为了实现javascript引擎用的,因此在javasc ...
- JavaScript 数据属性和访问器属性
在JavaScript中对象被定义为"无序属性的集合,其属性可以包含基本值.对象或函数."通俗点讲,我们可以把对象理解为一组一组的名值对,其中值可以是数据或函数. 创建自定义对象通 ...
- JavaScript 属性类型（数据属性和访问器属性）
数据属性 数据属性包含一个数据值的位置.在这个位置可以读取和写入值.数据属性有 4 个描述其行为的特性. [[Configurable]]:表示能否通过 delete 删除属性从而重新定义属性,能否修 ...
- JavaScript对象的两类属性（数据属性与访问器属性）
对JavaScript来说,属性并非只是简单的名称和值,JavaScript用一组特征(attribute)来描述属性 (property). 第一类属性数据属性具有四个特征. value:就是属性的 ...
- Js中的数据属性和访问器属性
Js中的数据属性和访问器属性 在javaScript中,对象的属性分为两种类型:数据属性和访问器属性. 一.数据属性 1.数据属性:它包含的是一个数据值的位置,在这可以对数据值进行读写. 2.数据属性 ...
随机推荐
- Oracle强制启动和关闭实例
要启动和关闭数据库,必须要以具有Oracle 管理员权限的用户登陆,通常也就是以具有SYSDBA权限的用户登陆.一般我们常用SYS用户以SYSDBA连接来启动和关闭数据库.下面介绍Oracle数据库几 ...
- java在控制台输出空心正方形，菱形，空心菱形
使用for和if打印一个空心正方形 /*思路:要想打印一个5x5的空心正方形,首先它的第一横行和最后一行都是填满的,需要全部遍历出来,第二三四行和只有左右两条边是出来的,中间部分为空的.因此在打印第 ...
- MySQL触发器更新和插入操作
一.触发器概念 触发器(trigger):监视某种情况,并触发某种操作,它是提供给程序员和数据分析员来保证数据完整性的一种方法,它是与表事件相关的特殊的存储过程,它的执行不是由程序调用,也不是手工启动 ...
- React Native App设置&Android版发布
React Native系列 <逻辑性最强的React Native环境搭建与调试> <ReactNative开发工具有这一篇足矣> <解决React Native un ...
- Ubuntu14.04安装有道词典
Ubuntu14.04安装有道词典之前要更新系统: sudo apt-get update sudo apt-get upgrade sudo apt-get dist-upgrade 在有道官网下载 ...
- 自己实现的数据表格控件（dataTable），支持自定义样式和标题数据、ajax等各种自定义设置以及分页自定义
一.前言 也没什么好说的嘛,用了蛮多github上开源的能够实现dataTable功能的表格插件,不过都默认绑定样式啊,数据格式也设定的比较死,所以忍不住自己实现了一个简单的可自定义样式和自定义数据返 ...
- Hadoop的配置过程（虚拟机中的伪分布模式）
1引言 hadoop如今已经成为大数据处理中不可缺少的关键技术,在如今大数据爆炸的时代,hadoop给我们处理海量数据提供了强有力的技术支撑.因此,了解hadoop的原理与应用方法是必要的技术知识. ...
- （转）java中/r与/n还有/r/n的区别
场景:在学习spring实战,以及工作中进行写文件时候,经常遇到java中的换行问题,发现有的书上的介绍和实际使用并不一致.现在才算是搞清楚! 通过文本对比,断言应该返回正确的结果!但是事与愿违,最终 ...
- 【JAVASCRIPT】React学习-JSX 语法
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 JSX 语法 1. 定义 JSX 是javascript + xml 的合集,我们可以将javascript 与 ht ...
- 解决input[type=file]打开时慢、卡顿问题
经过测试发现,在mac里面safari.Firefox.Chrome(opera不知道为啥老闪退)都没有卡顿问题 在windows里面,Firefox不卡顿,只有Chrome卡顿. 然而,这个插件是从 ...