面试经常提问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. poj 2773欧几里德

    Happy 2006 Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 5957   Accepted: 1833 Descri ...

  2. WSDL格式浅析

    其中,WSDL是一种 XML 格式,用于将网络服务描述为一组端点,这些端点对包含面向文档信息或面向过程信息的消息进行操作.这种格式首先对操作和消息进行抽象描述,然后将其绑定到具体的网络协议和消息格式上 ...

  3. 【Vijos 1607】【NOI 2009】植物大战僵尸

    https://vijos.org/p/1607 vijos界面好漂亮O(∩_∩)O~~ 对于一个植物x,和一个它保护的植物y,连一条边<x,y>表示x保护y,对于每个植物再向它左方的植物 ...

  4. 初见Python<6>:文件读写

    1.open函数语法: python通过open函数打开文件,建立程序与文件之间的连接. open函数语法:open(filename[,mode[,buffering]]) 其中filename是指 ...

  5. [2018湖南省队集训] 6.28 T3 simulate

    这道模拟题出的我毫无脾气2333 最重要的是先要发现操作顺序不影响最后的答案,也就是每次随便挑一个>=2的数进行操作最后总是可以得到同样的数列. (这个还不太难想qwq) 但是最骚的是接下来的模 ...

  6. 【BFS】The Morning after Halloween

    [POJ3523]The Morning after Halloween Time Limit: 8000MS   Memory Limit: 65536K Total Submissions: 23 ...

  7. HDU 6044 Limited Permutation(搜索+读入优化)

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=6044 [题目大意] 给出两个序列li,ri,现在要求构造排列p,使得对于区间[li,ri]来说, ...

  8. Activity(活动)生命周期(2)--活动状态

    每个活动在其生命周期中最多会有4种状态 一.运行状态 当一个活动位于返回栈的栈顶的时候,这时活动就处于运行状态.系统一般不会回收,因为这会带来非常差的用户体验 二.暂停状态 当一个活动不处于栈顶状态的 ...

  9. css排版之-标准文档流

    标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则.HTML文档中的元素可以分为两大类:行内元素和块级元素.       1.行内元素不占据单独的空间,依附于块级元素,行 ...

  10. word标题编号变成黑块

    把光标放置在黑块的后面 在键盘上按左方向键,则黑块变灰色(为选中状态) 然后ctrl+shift+s, 出现窗口“apply styles" 点击"reapply", 搞 ...