Vue.js 源码学习笔记 -- 分析前准备2 -- Object.defineProperty

解析神奇的 Object.defineProperty

  几行代码看他怎么用

 

　　

var a= {}

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

console.log(a.b); //123

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

等价于

 

　　

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的关键啊。