Vuejs2.x 源码解析 之 响应式对象（一）Object.defineProperty

Object.defineProperty 方法用于在对象上定义一个新属性，或者修改对象现有属性，并返回此对象

let persion = {};
Object.defineProperty(persion, 'name', {value:'atrus'});
persion.name;// 'atrus'

// 修改现有属性
persion.age = 20;
// 修改18岁
Object.defineProperty(persion, 'age', {value:18});
persion.age;// 18

Object.defineProperty(obj, prop, descriptor)

obj 是要添加/修改属性的对象

prop 是希望添加/修改的属性名

descriptor 是添加/修改属性的具体描述

descriptor

1. 数据描述符类（value，writable）
   当该属性的 writable 键值为 true 时，属性的值，也就是上面的 value，才能被赋值运算符改变

let persion = {};
Object.defineProperty(o, 'name', {
    value: 'atrus',
    writable: false
});

// 尝试修改name属性
persion.name = 'atrus1';
// 再次读取，结果并未修改成功
persion.name;// atrus

2. 存取描述符类（get，set）

let persion = {};
persion.name = 'atrus';
persion.name; // 'atrus'

//使用get set模拟赋值取值操作
let age;
Object.defineProperty(o, 'age', {
    get() {
        // 直接返回age
        return age;
    },
    set(val) {
        // 赋值时触发，将值赋予变量age
        age = val;
    }
});
persion.age = 18;
persion.age; // 18

3. 能与数据描述符或者存取描述符共存的共有属性（configurable，enumerable）

enumerable 值类型为 Boolean，表示该属性是否可被枚举，啥意思？我们知道对象中有个方法 Object.keys() 用于获取对象可枚举属性

configurable 的值也是 Boolean ，默认是 false ，configurable 特性表示对象的属性是否可以被删除，以及除 value 和 writable 特性外的其他特性是否可以被修改。

let persion = {
  name: 'atrus'
};
Object.defineProperty(persion, 'age', {
  value: 27,
  enumerable: false
});

// 无法获取keys
Object.keys(persion); // ['name']
// 无法遍历访问
for (let i in persion) {
  console.log(i); // 'name'
};

let persion = {
  name: 'atrus'
};
Object.defineProperty(persion, 'age', {
  value: 27,
  configurable: false
});

delete persion.name; // true
delete persion.age; // false

persion.name; // undefined
persion.age; // 27

前面概念已经提出对象属性描述符要么是 数据描述符（value，writable） ，要么是 存取描述符（get，set） ，不应该同时存在两者描述符。