面试经常提问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的更多相关文章

  1. javascript之Object.defineProperty的奥妙

    直切主题 今天遇到一个这样的功能: 写一个函数,该函数传递两个参数,第一个参数为返回对象的总数据量,第二个参数为初始化对象的数据.如: var o = obj (4, {name: 'xu', age ...

  2. Object.defineproperty实现数据和视图的联动

    Object.defineproperty语法 var o = {}; // 创建一个新对象 // Example of an object property added with definePro ...

  3. Vue 双向数据绑定原理分析 以及 Object.defineproperty语法

    第三方精简版实现 https://github.com/luobotang/simply-vue Object.defineProperty 学习,打开控制台分别输入以下内容调试结果 userInfo ...

  4. 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 ...

  5. Object.defineProperty

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

  6. Object.defineproperty实现数据和视图的联动 ------是不是就是 Angular 模型和视图的同步的实现方式???

    参考:http://www.cnblogs.com/oceanxing/p/3938443.html https://developer.mozilla.org/zh-CN/docs/Web/Java ...

  7. 20+行代码使用es5 Object.defineProperty 实现简单的watch功能

    /** * 一个简单的demo 帮助理解defineProperty,只对Object类型参数有效 */ $watch=function(myObject,callback){ function in ...

  8. Object.defineProperty()方法的用法详解

    Object.defineProperty()函数是给对象设置属性的. Object.defineProperty(object, propertyname, descriptor); 一共有三个参数 ...

  9. 理解Object.defineProperty()

    理解Object.defineProperty() Object.defineProperty() 方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 基本语法:Obj ...

  10. 利用object.defineProperty实现数据与视图绑定

    如今比较火的mvvm框架,例如vue就是利用es5的defineProperty来实现数据与视图绑定的,下面我来介绍一下defineProperty的用法. var people= {} Object ...

随机推荐

  1. mysql查看表结构,字段等命令

    mysql查看表结构命令,如下: desc 表名; show columns from 表名; describe 表名; show create table 表名;

  2. [HDU1542]Atlantis(扫描线+线段树)

    Atlantis Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  3. BZOJ 2654 tree(二分答案+并查集)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2654 [题目大意] 给你一个无向带权连通图,每条边是黑色或白色. 让你求一棵最小权的恰 ...

  4. [Contest20171005]Maze

    考虑一个$N\times M$的网格,每个网格要么是空的,要么是障碍物.整个网格四周都是墙壁(即第$1$行和第$N$行,第$1$列和第$M$列都是墙壁),墙壁有且仅有两处开口,分别代表起点和终点.起点 ...

  5. 【分块】【暴力】XVII Open Cup named after E.V. Pankratiev Grand Prix of Moscow Workshops, Sunday, April 23, 2017 Problem I. Rage Minimum Query

    1000w的数组,一开始都是2^31-1,然后经过5*10^7次随机位置的随机修改,问你每次的全局最小值. 有效的随机修改的期望次数很少,只有当修改到的位置恰好是当前最小值的位置时才需要扫一下更新最小 ...

  6. 【DFS】POJ3009-Curling 2.0

    [题目大意] 给出一张地图,一旦往一个方向前进就必须一直向前,直到一下情况发生:(1)碰到了block,则停在block前,该block消失:(2)冲出了场地外:(3)到达了终点.改变方向十次以上或者 ...

  7. 企鹅----sap+裂点

    企鹅 题目描述 在靠近南极的某处,一些企鹅站在许多漂浮的冰块上.由于企鹅是群居动物,所以它们想要聚集到一起,在同一个冰块上.企鹅们不想把自己的身体弄湿,所以它们在冰块之间跳跃,但是它们的跳跃距离,有一 ...

  8. [NOIp2017提高组]逛公园

    题目大意: 给你一个有向图,若用dis(u,v)表示从u到v的最短路长度,求从1到n的长度不超过dis(1,n)+k的路径数. 思路: 首先分别预处理出以1,n为起点的单.源最短路. 对于合法的边重构 ...

  9. strust2的核心和工作原理

    在学习strust2之前,我们要明白使用struts2的目的是什么?它能给我们带来什么样的好处? 设计目标 Strust设计的第一目标就是使MVC模式应用于web程序设计. 技术优势 Struts2有 ...

  10. uva1632 (区间DP)

    题意:有n个宝藏,在x轴上,每个宝藏在某个时间会消失,问最少吃完所有宝藏的时间是多少,否则输出no solution 分析:区间DP,f[i][j][01]代表i到j区间内的全部吃完,停留在左/右端, ...