关于Object.defineProperty的get和set
面试经常提问vue双向数据绑定的原理,其主要是依赖于Object.definePropety();
Object.definePropety下面有get和set方法。
get指读取属性时调用的放法,set是写入属性时调用的方法。
举个例子:
var book={
_year = 2004,
edition:1
};
Object.defineProperty(book,"year",{
get: function(){
return this._year;
},
set : function(newValue){
if (newValue > 2004){
this._year = newValue;
this.edition += newValue -2004;
}
}
});
book.year =2005;
alert(book.edition); //2
开始,当book.year=2005时,get获取到this._year的值,然后传值给set,保存新值,this.year=newValue=2005,this.edition=2。同理,将book.year改为2006,那么edition的值应为3,2014应为1.
关于Object.defineProperty的get和set的更多相关文章
- javascript之Object.defineProperty的奥妙
直切主题 今天遇到一个这样的功能: 写一个函数,该函数传递两个参数,第一个参数为返回对象的总数据量,第二个参数为初始化对象的数据.如: var o = obj (4, {name: 'xu', age ...
- Object.defineproperty实现数据和视图的联动
Object.defineproperty语法 var o = {}; // 创建一个新对象 // Example of an object property added with definePro ...
- Vue 双向数据绑定原理分析 以及 Object.defineproperty语法
第三方精简版实现 https://github.com/luobotang/simply-vue Object.defineProperty 学习,打开控制台分别输入以下内容调试结果 userInfo ...
- Object.defineProperty vs __defineGetter__ vs normal
Testing in Chrome 31.0.1650.63 32-bit on Windows Server 2008 R2 / 7 64-bit Test Ops/sec Object.defin ...
- Object.defineProperty
属性类型ECMA-262第5版在定义只有内部才用的特性(attribute)时,描述了属性(property)的各种特征.ECMA-262定义这些特性是为了实现JavaScript引擎用的,因此在Ja ...
- Object.defineproperty实现数据和视图的联动 ------是不是就是 Angular 模型和视图的同步的实现方式???
参考:http://www.cnblogs.com/oceanxing/p/3938443.html https://developer.mozilla.org/zh-CN/docs/Web/Java ...
- 20+行代码使用es5 Object.defineProperty 实现简单的watch功能
/** * 一个简单的demo 帮助理解defineProperty,只对Object类型参数有效 */ $watch=function(myObject,callback){ function in ...
- Object.defineProperty()方法的用法详解
Object.defineProperty()函数是给对象设置属性的. Object.defineProperty(object, propertyname, descriptor); 一共有三个参数 ...
- 理解Object.defineProperty()
理解Object.defineProperty() Object.defineProperty() 方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 基本语法:Obj ...
- 利用object.defineProperty实现数据与视图绑定
如今比较火的mvvm框架,例如vue就是利用es5的defineProperty来实现数据与视图绑定的,下面我来介绍一下defineProperty的用法. var people= {} Object ...
随机推荐
- Thinkphp模板中函数的使用
1.在模板中使用php函数 在thinkphp的html中,我们经常会遇到一些变量难以直接从php控制端直接处理,这些变量只有在模板中循环输出的时候处理比较合适,这个时候,我们就要在模板中使用函数 1 ...
- websocket初步了解
https://www.cnblogs.com/fuqiang88/p/5956363.html websocket是一种新型的协议,协议标识符为ws,加密即为wss 简单说来就是一种持续的http服 ...
- 关于Spring和SpringMVC的一点感悟
一年前,我们项目最开始使用的SSH(spring+springmvc+hibernate),那时候项目经理搭建好了框架就交给了我们,后来在一次配置事务的过程中,出现了大名鼎鼎的no seesion. ...
- Bzoj3566/洛谷P4284 [SHOI2014]概率充电器(概率dp)
题面 Bzoj 洛谷 题解 首先考虑从儿子来的贡献: $$ f[u]=\prod_{v \in son[u]}f[v]+(1-f[v])\times(1-dis[i]) $$ 根据容斥原理,就是儿子直 ...
- Redux 中间件的执行顺序理解
Redux.applyMiddleware(thunk, middleware1) 和 Redux.applyMiddleware(middleware1, thunk) 的区别: <!DOCT ...
- [bzoj3244][noi2013]树的计数 题解
UPD: 那位神牛的题解更新了,在这里. ------------------------------------------------------------------------------- ...
- 【其它算法】Face The Right Way
Face The Right Way Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 5278 Accepted: 246 ...
- Java异步编程——深入源码分析FutureTask
Java的异步编程是一项非常常用的多线程技术. 之前通过源码详细分析了ThreadPoolExecutor<你真的懂ThreadPoolExecutor线程池技术吗?看了源码你会有全新的认识&g ...
- DoTA与人生
一个dota菜鸟的人生感悟 接触Dota有了快3年之久,3年里可以经历很多东西,经历了很多东西之后就会有很多的感悟,有些感悟抽象的表达不出来,但是借助于dota,可以间接 ...
- 乐观锁悲观锁对应的JAVA代码和数据库
乐观锁悲观锁是一种思想.可以用在很多方面. 比如数据库方面.悲观锁就是for update乐观锁就是 version字段 JDK方面:悲观锁就是sync乐观锁就是原子类(内部使用CAS实现) 本质来说 ...