面试经常提问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. hihoCoder #1871 : Heshen's Account Book-字符串暴力模拟 自闭(getline()函数) (ACM-ICPC Asia Beijing Regional Contest 2018 Reproduction B) 2018 ICPC 北京区域赛现场赛B

    P2 : Heshen's Account Book Time Limit:1000ms Case Time Limit:1000ms Memory Limit:512MB Description H ...

  2. 洛谷P3391文艺平衡树(Splay)

    题目传送门 转载自https://www.cnblogs.com/yousiki/p/6147455.html,转载请注明出处 经典引文 空间效率:O(n) 时间效率:O(log n)插入.查找.删除 ...

  3. 读书笔记(javascript语言精粹)

    1. 注释: 在js中,/**/为块注释,//为行注释:但块注释在有些情况下是不安全的.如: /* var rm_a = /a*/.match(s); */ 上面的注释导致了一个语法错误.所以,建议避 ...

  4. git "Could not read from remote repository.Please make sure you have the correct access rights."解决方案

    我们在使用git clone 或其他命令的时候,有时候会遇到这类问题,如图: fatal: Could not read from remote repository.Please make sure ...

  5. ZOJ 3057 Beans Game 博弈论 sg函数

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3057 典型的sg函数,数据范围卡得真好啊 代码 #include<c ...

  6. [2018湖南省队集训] 6.28 T2 color

    毒瘤计数题2333,(小声)k其实可以出到1e9,不过这样求组合数的时候就要记1000种数的1~1000次下降幂(用到的组合数中第一维在1e9级别的只有1000种左右,第二维都是<=1000), ...

  7. 【图论】Network of Schools

    [POJ1236]Network of Schools Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 18969   Acc ...

  8. 【数论】【中国剩余定理】【LCM】hdu1788 Chinese remainder theorem again

    根据题目容易得到N%Mi=Mi-a. 那么可得N%Mi+a=Mi. 两侧同时对Mi取余,可得(N+a)%Mi=0. 将N+a看成一个变量,就可以把原问题转化成求Mi的LCM,最后减去a即可. #inc ...

  9. Erlang学习记录(一)——Windows下的环境搭建

    一.安装编译器 在http://www.erlang.org/download.html下载R16B01 Windows Binary File并安装. 二.运行编译器 安装完编译器后,打开安装目录下 ...

  10. CDOJ 1277 智商杯考试 每周一题 div2 二分+数学

    智商杯考试 题目连接: http://acm.uestc.edu.cn/#/problem/show/1277 Description 你是一个挂科选手. 你现在正在考试,你很方. 你参加的考试叫做智 ...