解析神奇的 Object.defineProperty

  几行代码看他怎么用

 

  

var a= {}

Object.defineProperty(
  a,
  "b",
  {
  value:123
  }); console.log(a.b); //

很简单,它接受三个参数,而且都是必填的

等价于

 

  

var a= {}
Object.defineProperty(a,"b",{
value:123,
writable:false,
enumerable:false,
configurable:false // 这个为false, 再对a, 其他的任何设置都会报错
}) a.value = 1; //error
console.log(a.b);//123
var a = {}; 

Object.defineProperty(o, "b", {
value : 123,
writable : false }); console.log(a.b); // 打印 37
a.b = 25; // 没有错误抛出(在严格模式下会抛出,即使之前已经有相同的值)
console.log(o.a); // 打印 37, 赋值不起作用。

  

var a= {}
Object.defineProperty(a,"b",{
value:3445,
enumerable:false //注意咯这里改了
})
console.log(Object.keys(a));// 打印[] for in也不行

  

在 descriptor 中不能同时设置访问器(get 和 set)和 wriable 或 value,否则会错,就是说想用 get 和 set,就不能用 writable 或 value 中的任何一个。

var a= {}
Object.defineProperty(a,"b",{
set:function(newValue){
console.log("我检查检测到你赋值给我了,我的新值是"+newValue)
},
get:function(){
console.log("我检测到你取我的值")
return 2 //注意这里,我硬编码返回2
}
})
a.b =1 //打印 你要赋值给我,我的新值是1
console.log(a.b) //打印 你取我的值
//打印 2 注意这里,和我的硬编码相同的

  

简单来说,这个 “b” 赋值或者取值的时候会分别触发 set 和 get 对应的函数。

这就是实现 observe的关键啊。

Vue.js 源码学习笔记 -- 分析前准备2 -- Object.defineProperty的更多相关文章

  1. Vue.js 源码学习笔记 -- 分析前准备1 -- vue三大利器

    主体 实例方法归类:   先看个作者推荐, 清晰易懂的  23232 简易编译器   重点: 最简单的订阅者模式 // Observer class Observer { constructor (d ...

  2. Vue.js 源码学习笔记

    最近饶有兴致的又把最新版 Vue.js 的源码学习了一下,觉得真心不错,个人觉得 Vue.js 的代码非常之优雅而且精辟,作者本身可能无 (bu) 意 (xie) 提及这些.那么,就让我来吧:) 程序 ...

  3. Vue.js 源码学习笔记 - 细节

     1. this._eventsCount = { }    这是为了避免不必要的深度遍历: 在有广播事件到来时,如果当前 vm 的 _eventsCount 为 0, 则不必向其子 vm 继续传播该 ...

  4. Underscore.js 源码学习笔记(下)

    上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, cont ...

  5. Underscore.js 源码学习笔记(上)

    版本 Underscore.js 1.9.1 一共 1693 行.注释我就删了,太长了… 整体是一个 (function() {...}());  这样的东西,我们应该知道这是一个 IIFE(立即执行 ...

  6. vue.js源码学习分享(一)

    今天看了vue.js源码  发现非常不错,想一边看一遍写博客和大家分享 /** * Convert a value to a string that is actually rendered. *转换 ...

  7. AlloyTouch.js 源码 学习笔记及原理说明

    alloyTouch这个库其实可以做很多事的, 比较抽象, 需要我们用户好好的思考作者提供的实例属性和一些回调方法(touchStart, change, touchMove, pressMove, ...

  8. AlloyFinger.js 源码 学习笔记及原理说明

    此手势库利用了手机端touchstart, touchmove, touchend, touchcancel原生事件模拟出了 rotate  touchStart  multipointStart   ...

  9. move.js 源码 学习笔记

    源码笔记: /* move.js * @author:flfwzgl https://github.com/flfwzgl * @copyright: MIT license * Sorrow.X - ...

随机推荐

  1. 【Android实验】 数据存储与访问sqlite

    目录 实验目的 实验要求 实验过程 功能分析: 实验结果: 实验的代码 实验总结 实验目的     分别使用sqlite3工具和Android代码的方式建立SQLite数据库.在完成建立数据库的工作后 ...

  2. The way to Go(3): 安装Go环境

    Reference: Github: Go Github: The way to Go 在mac上安装Go语言初体验 安装Go环境 Go 语言开发团队开发了适用于以下操作系统的编译器: Linux F ...

  3. UVa 11292 勇者斗恶龙

    https://vjudge.net/problem/UVA-11292 题意:有n条任意个头的恶龙,你希望雇一些其实把它杀死.一个能力值为x的骑士可以砍掉恶龙一个直径不超过x的头,且需要支付x个金币 ...

  4. UVa 12545 比特变换器

    https://vjudge.net/problem/UVA-12545 题意:输入两个等长的串S和T,其中S包含字符0,1,?,但T只包含0和1. 用尽量少的步数把S变成T.每步有3种操作: ①把S ...

  5. neu 1694 Primorial vs LCM 数论

    1694: Primorial vs LCM 时间限制: 4 Sec  内存限制: 128 MB[提交][状态][讨论版] 题目描述 Given N (2<=N<=10^14), what ...

  6. hdu 5672 String 尺取法

    String Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Problem D ...

  7. Chrome开发者工具之JavaScript内存分析(转)

    尽管JavaScript使用垃圾回收进行自动内存管理,但有效的(effective)内存管理依然很重要.在这篇文章中我们将探讨分析JavaScript web应用中的内存问题.在学习有关特性时请确保尝 ...

  8. template.js 模版内调用外部JS方法

    template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果.模版定义如下: ...

  9. Windows 2008 更改网卡绑定顺序

    用 ncpa.cpl 或者用鼠标右键点网上邻居进去也好. 来到网卡列表画面. 然后,你会发觉没有菜单去操作[高级设置], 这里,最高级的步骤来了, 就是你需要按一个 [Alt]把菜单给显示出来,太神奇 ...

  10. Jmeter JDBC的使用

    1.当我们在对接口进行断言或进行多个接口串联时,常常会需要从DB查询数据来做辅助,连接JDBC需要有支持DB的jar包:官网下载地址:https://dev.mysql.com/downloads/c ...