最早认识这个函数,源于对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. [PHP开发必备] -- 小巧强悍的MYSQL-Front中文版使用教程,附最新版下载地址

    PHP开发已经各位工程师轻车熟路的事情,MySQL也是经常都要用的产品,能有一个简单而又强大的管理工具,那可是咱们PHP开发工程师的福气. 下面浪风小园子就为大家介绍下来自国外小巧的MySQL管理工具 ...

  2. 004androidStudio ndk开发环境

    004androidStudio ndk开发环境 android studio中编译C/C++源代码 1. 配置ndk.dir 在 local.properties 添加如下配置: sdk.dir=p ...

  3. Mysql事务-隔离级别

    MYSQL事务-隔离级别 事务是什么? 事务简言之就是一组SQL执行要么全部成功,要么全部失败.MYSQL的事务在存储引擎层实现. 事务都有ACID特性: 原子性(Atomicity):一个事务必须被 ...

  4. supervisor 与 yii定时任务

    https://www.jianshu.com/p/9abffc905645 https://www.cnblogs.com/ajianbeyourself/p/5534737.html https: ...

  5. php 工厂方法模式

    #使用工厂方法模式是不知道要创建类的对象有哪些.interface IFactory{ public function CreateOperation();#工厂方法模式只有单个产品 } class ...

  6. Android Studio下通过Gradle配置实现资源文件的模块化

    当开发一个app模块个数很多的时候,资源文件就会特别多,布局也会多起来,这时所有的layout都放在同一个目录下,就会显得臃肿,而且不好找相应的布局. 最近看到相关资料,发现在Android Stud ...

  7. 用训练好的caffemodel对单个/批量图片进行分类

    一.单个图片进行分类 这个比较简单,在*.bat文件中输入以下代码: @echo off set BIN_DIR=D:\caffe\caffe-windows\Build\x64\Release se ...

  8. .net framework 4.5 在Visual studio 2015中丢失

    解决办法:从另一台C:\Program Files(x86)\Reference Assemblies\Microsoft\.NetFramework 成功的环境中copy .net4.5 文件夹到错 ...

  9. Sql注入基础一

    凡是带入数据库查询的都有可能是注入.     整个数据包 Sql注入原理? 网站数据传输中,接受变量传递的值未进行过滤,导致直接带入数据库查询执行的操作问题. Sql注入对于渗透的作用? 获取数据(网 ...

  10. float 的先后顺序 理解流

    <!DOCTYPE html><html><head><style> p{float:right;}</style></head> ...