面试经常提问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. (8)go 字符串

    内建函数在 包中 1. len(str) 计算长度,中文占3个字符 2.字符串遍历,同时处理中文 package main import ( "fmt" ) func main() ...

  2. Office 2016系列下载地址

    版本:Office 2016 Pro Plus 64位文件名:SW_DVD5_Office_Professional_Plus_2016_64Bit_ChnSimp_MLF_X20-42426.ISO ...

  3. npp插件-NewFileBrowser:自定义模板

    ☞ 概述 NewFileBrowser用于定义文件的初始化文本.当我们创建一个jsp文件,或者spring bean的配置文件,或者maven的pom文件... 总有一些内容是固定的:把这些内容建立成 ...

  4. BZOJ 2697 特技飞行(贪心)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2697 [题目大意] 神犇航空开展了一项载客特技飞行业务. 每次飞行长N个单位时间,每个 ...

  5. 【二分】Codeforces Round #417 (Div. 2) C. Sagheer and Nubian Market

    傻逼二分 #include<cstdio> #include<algorithm> using namespace std; typedef long long ll; ll ...

  6. 【MySQL笔记】用户管理

    1.账户管理 1.1登录和退出MySQL服务器 MySQL –hhostname|hostIP –P port –u username –p[password] databaseName –e &qu ...

  7. FutureTask源码分析

    1. 常量和变量 private volatile int state; // 任务状态 private static final int NEW = 0; private static final ...

  8. django, form.errors处理

    from.errors其实就是一个字典, 可以利用for error in form.errors.values, 或者for key,  value in form.errors遍历得到其中的数据

  9. PHP手册笔记

    <?php getenv — 获取一个环境变量的值 $ip = getenv ( 'REMOTE_ADDR' ); // 或简单仅使用全局变量($_SERVER 或 $_ENV) $ip = $ ...

  10. [转]No configuration found for the specified action解决办法

    使用Struts2,配置一切正常,使用常用tag也正常,但是在使用<s:form>标记时,发现控制台总是输出警告信息, 警告信息内容如下: 警告: ...... <div> h ...