最早认识这个函数,源于对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小解的更多相关文章

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

随机推荐

  1. MFC 资源记录

    MFC的RC文件中,定义很多中资源,每种资源具体是如何定义的,资源文件中各种符号都是什么意义? LTEXT           "A&xis:",IDC_STATIC,12 ...

  2. ECharts:企业报表工具

    ECharts.纯Javascript图表库,基于Canvas,底层依赖ZRender.商业产品经常使用图表库,提供直观,生动.可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫 ...

  3. 服务器之ECC报错检查

    需要使用ipmitool工具 [root@Resource ~]# yum install ipmitool 首先查看是否有ecc报错 如下图: [root@Resource ~]# ipmitool ...

  4. 45、Android事件总线分发库的使用

    事件总线分发库EventBus和Otto的简介及对比 什么是事件总线管理: a.将事件放到队列里,用于管理和分发b.保证应用的各个部分之间高效的通信及数据.事件分发c.模块间解耦 Event Bus是 ...

  5. hdu5125(LIS)

    相当于用多个O(nlog(n))LIS来做. // // main.cpp // 160322 // // Created by 陈加寿 on 16/3/22. // Copyright © 2016 ...

  6. 【BZOJ2298】[HAOI2011]problem a DP

    [BZOJ2298][HAOI2011]problem a Description 一次考试共有n个人参加,第i个人说:“有ai个人分数比我高,bi个人分数比我低.”问最少有几个人没有说真话(可能有相 ...

  7. Introduction to Mathematical Thinking - Week 9

    错题 评分出错 题目要求的是 "any" ,而答案只给出了一个.所以认为回答者没有理解题意,连 any 都没有理解.所以 0 分. 第一,标准的归纳法只能对自然数使用,而题目要求的 ...

  8. coursera 《现代操作系统》 -- 第十一周 IO系统

    本周要求 错题 下列I/O控制方式中,哪一个不需要硬件支持? 中断方式 轮询方式 DMA方式 I/O处理机方式 中断方式:中断控制器 轮询方式:CPU不断查询设备以了解其是否就绪 DMA:使用到了   ...

  9. js验证表单大全3

    2 >表单提交验证类  2.1 表单项不能为空 <scriptlanguage="javascript"> <!-- function CheckForm( ...

  10. Python3.6全栈开发实例[008]

    8.有如下变量(tu是个元祖),请实现要求的功能:tu = ("alex", [11, 22, {"k1": 'v1', "k2": [&q ...