javaScript Object.defineProperty 详解，及vue2中Observer解析

Object.defineProperty

直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象;

备注：应当直接在 Object 构造器对象上调用此方法，而不是在任意一个 Object 类型的实例上调用。

/**
 * obj { Object } 必传，目标对象（要定义属性的对象）
 * prop { String | Symbol } 必传， 需定义或修改的属性的名字
 * descriptor { Object } 必传， 要定义或修改的属性描述符
 * 	 	configurable { Boolean } false 属性是否可删除，及除 value 和 writable 特性外的其他特性是否可以被修改。
 *      enumerable   { Boolean } false 属性是否对象的枚举属性中(for in 或者 Object.keys()的遍历中)
 * 		writable     { Boolean } false 属性是否被 赋值运算符 改变 （值能否被修改）
 * 		value        {   any   } undefined 属性对应的值
 *      set          { Function } undefined 属性设置值的时候触发的函数,设置的新值通过参数第一个值获取
 * 		get			 { Function } undefined 属性获取值的时候触发的函数
 * */
Object.defineProperty(obj, prop, descriptor)

数据描述符

configurable	enumerable	writable	value

存取描述符

configurable	enumerable	set	get

注意：一个描述符同时拥有 value 或 writable 和 get 或 set 键，则会产生一个异常。

属性描述符：

configurable：

// 当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。
const obj = {}
Object.defineProperty(obj, 'a', {
	value: 'a',
	configurable: true
})
console.log(Object.getOwnPropertyDescriptor(obj, 'a'))
// 当前obj.a 描述符 { value: 'a', writable: false, enumerable: false, configurable: true }

Object.defineProperty(obj, 'a', {
	value: 'aa',
	enumerable: true
})
console.log(Object.getOwnPropertyDescriptor(obj, 'a'))
// 当前 obj.a 描述符 {value: 'aa', writable: false, enumerable: true, configurable: true}

Object.defineProperty(obj, 'a', {
	writable: true
})
console.log(Object.getOwnPropertyDescriptor(obj, 'a'))
// 当前 obj.a 描述符 {value: 'aa', writable: true, enumerable: true, configurable: true}

// 当configurable 为 false ，去修改 value, configurable, enumerable
Object.defineProperty(obj, 'a', { configurable: false })

console.log(Object.getOwnPropertyDescriptor(obj, 'a'))
// 当前 obj.a 描述符 {value: 'aa', writable: true, enumerable: true, configurable: false}

// 报错
//Object.defineProperty(obj, 'a', { configurable: true })

// 报错
//Object.defineProperty(obj, 'a', { enumerable: false })

// 报错
//Object.defineProperty(obj, 'a', { set (value) { obj.c = value } })

// 报错
//Object.defineProperty(obj, 'a', { get () { return obj.c } })

delete obj.a // false 无法删除

enumerable:

// 定义了对象的属性是否可以在 for...in 循环和 Object.keys() 中被枚举
const obj2 = {};
Object.defineProperty(obj2, "a", { value : 1, enumerable: true });
Object.defineProperty(obj2, "b", { value : 2, enumerable: false });
Object.defineProperty(obj2, "c", { value : 3 }); // enumerable 默认为 false
o.d = 4; // 如果使用直接赋值的方式创建对象的属性，则 enumerable 为 true
Object.defineProperty(obj2, Symbol.for('e'), {
  value: 5,
  enumerable: true
});
Object.defineProperty(obj2, Symbol.for('f'), {
  value: 6,
  enumerable: false
});

for (const i in obj2) {
  console.log(i);
} // a d

Object.keys(obj2); // ['a', 'd']

obj2.propertyIsEnumerable('a'); // true
obj2.propertyIsEnumerable('b'); // false
obj2.propertyIsEnumerable('c'); // false
obj2.propertyIsEnumerable('d'); // true
obj2.propertyIsEnumerable(Symbol.for('e')); // true
obj2.propertyIsEnumerable(Symbol.for('f')); // false

// 使用扩展运算符 只有 enumerable 为true 才能被获取
var p = { ...obj2 }
p.a // 1
p.b // undefined
p.c // undefined
p.d // 4
p[Symbol.for('e')] // 5
p[Symbol.for('f')] // undefined

writable:

// 当 writable 属性设置为 false 时，该属性被称为“不可写的”。它不能被重新赋值。
const obj3 = {}
Object.defineProperty(obj3, 'a', {
	value: 'a',
	writable: true
})
obj3.a = 4
console.log(obj3.a) // 4
Object.defineProperty(obj3, 'b', {
	value: 'b',
	writable: false // 或者可以不设置 默认为false
})
obj3.b = 4
console.log(obj3.b) // b

// 如果在 use strict 模式下 不可写 属性 ，去修改其值 就会报错
(function() {
  'use strict';
  const obj4 = {};
  Object.defineProperty(obj4, 'a', {
    value: 2,
    writable: false
  });
  obj4.a = 3; // Cannot assign to read only property 'a' of object '#