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.数据属性 ...
随机推荐
- php利用ob缓存机制实现页面静态化方法全解
首先介绍一下php中ob缓存常用到的几个常用函数 ob_start():开启缓存机制 ob_get_contents():获取ob缓存中的内容 ob_clean()清除ob缓存中的内容,但不关闭缓存 ...
- MFC常见问题以及解决方法（1）_MFC下文本编辑框按下回车后窗口退出
这里主要介绍遇到这种方法的解决方案,解决方法可能有多种,但这里只给出有效的一种,这里不会详细说明出现问题的原因以及为什么这样解决,想了解更多可以百度,写这个主要是防止以后忘记,做个简单的笔记. 问题: ...
- 集合的定义，操作及运算 （Python）
集合的定义: 集合和列表([ ]) 与 字典 ( { }) 不同,没有特别的特别的语法格式.可以使用set () 创建. 集合同字典一样是无序的.也是不具有重复性的.因此可以把列表变成集合进 ...
- 在ubuntu下使用minicom连接交换机/路由器Console口
首先下载并安装minicom sudo apt-get install minicom 然后将Console线一端连上交换机的Console口,另一端连上电脑(我这里是通过USB口连接的) 然后查看对 ...
- 一大波jQuery事件即将来袭！
一.jQuery事件 1.focus()元素获得焦点 2.blur()元素失去焦点 3.change() 表单元素的值发生变化(可用于验证用户名是否存在) 4.click() 鼠标单击 5.dbcli ...
- electron 使用 node-ffi C++ 动态链接库（DLL）
一.为什么需要使用DLL 需要使用系统 API 操作或扩展应用程序: 需要调用第三方的接口API,特别是与硬件设备进行通信,而这些接口 API 基本上都是通过 C++ 动态链接库(DLL)实现的: 需 ...
- jenkins-APP打包页面展示二维码
背景: 客户要求在APP打包页面展示二维码.虽然感觉这个功能很鸡肋,但是还是加上吧. 效果展示: 配置: 在上图中,106对应的内容是BuildName,我们可以通过build-name-setter ...
- JMeterPluginsCMD Command Line Tool
There is small command-line utility for generating graphs out of JTL files. It behave just like righ ...
- ES6解构赋值
前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程.本文将详细介绍ES6解构赋值 ...
- 阿里云服务器怎么运行多个项目(Nginx)
server { listen 80; server_name yy.test.cn; access_log /data/wwwlogs/access_nginx.log combined; root ...