Object.defineProperty小解
最早认识这个函数,源于对vue双向绑定的探索,vue通过这个函数实现属性挟持并结合发布者-订阅者模式实现双向绑定
先看一个实例:
var o= {name: 'a'}
Object.defineProperty(o, 'value', {
value: 3,
writable: true,
enumerable: true,
cofigurable: true
})
console.log(o.value) //3
三个参数,分别是目标对象、属性名称、参数对象
value:属性值
writable:属性是否可改写,默认false
enumerable:是否可在for..in循环中被列举或通过Object.keys列举,默认false
cofigurable:总开关,设为false后其他属性无效,默认false
而此函数最主要的用法,在于其可以设置get、set函数对取值、赋值行为进行监控并操作,(可称之为属性挟持,这个属性被此函数强制掌控了!)
Object.defineProperty(o, 'value1', {
get: function(){
console.log("我挟持了获取操作")
return value1
},
set: function(newValue){
console.log("我挟持了赋值操作")
value1= newValue
}
})
o.value1= '1'
console.log(o.value1)
1
Object.defineProperty小解的更多相关文章
- 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 ...
随机推荐
- JavaScript 函数语法
函数就是包裹在花括号中的代码块,前面使用了关键词 function: function functionname() { 这里是要执行的代码 } 当调用该函数时,会执行函数内的代码. 可以在某事件发生 ...
- Linux网络编程(一)基础
一.数据存储顺序:大端和小端 大端模式: 地址的增长顺序与值的增长顺序相反 小段模式: 地址的增长顺序与值的增长顺序同样 为什么会有大小端模式之分呢?这是由于在计算机系统中,我们是以字 ...
- MySQL运算符总结
注解:常常用于where条件判断中
- go http的三种实现---3
package main //效率最高的一个方法 import ( "fmt" "io" "log" "net/http" ...
- Laravel5.1 模型--ModelFactory
今天要说的是模型工厂,它是可以快速生成一些测试数据的东西,之前我们介绍过Seeder,当我们使用模型访问数据时 可以用模型工厂搭配Seeder使用. 1 编写一个ModelFactory ModelF ...
- jQuery整理笔记八----jQuery的Ajax
Ajax,我一直读的是"阿贾克斯",据当时大学老师讲该读音出处是依据当年风靡欧洲的荷兰足球俱乐部阿贾克斯的名字来的,我认为说法挺靠谱的. jQuery封装了Ajax的交互过程,用户 ...
- http://www.haolizi.net/example/view_2380.html
null
- Android无线测试之—Genymotion配置过程中常见问题
一.前提条件: 已经部署好了Android UiAutomator测试环境. 二.在部署Genymotion时遇到了两类问题: 1.通过eclipse打开一个模拟设备,然后将编译好的jar包push到 ...
- iphone断点下载,断点续传
本文转载至 http://blog.csdn.net/zaitianaoxiang/article/details/6650469 - (void)loadView { NSURLConnection ...
- 求割点模板(可求出割点数目及每个割点分割几个区域)POJ1966(Cable TV Network)
题目链接:传送门 题目大意:给你一副无向图,求解图的顶点连通度 题目思路:模板(图论算法理论,实现及应用 P396) Menger定理:无向图G的顶点连通度k(G)和顶点间最大独立轨数目之间存在如下关 ...