对象的属性在创建的时候，都会带有属性描述符，分为数据描述符和存取描述符
数据描述符是具有值的属性，改属性值可能可写，也可能只读，有四个可选键值
configurable：表示当前属性能否从对象上删除，能否改变描述符，默认false，只有值为true时才能实现上述操作；
enumerable：表示该属性是否可以枚举，即是否可以通过for in循环或者 Object.key()遍历到，默认false；
value：表示该属性对应的值可以是任何有效的JS值(数值，对象，函数等)，默认undefined；
writable：表示该属性是否可写，即是否可以被赋值运算符修改。默认为false。
存取描述符：也叫访问器属性，有四个可选键值
configurable：同数据描述符中描述；
enumerable：同数据描述符中描述；
get：读取属性时调用的函数，当访问一个属性时，该方法被执行，默认为undefined；
set：修改属性值时调用的函数，当属性值被修改，处罚执行该方法。默认为undefined。
当使用
字面量方式或者构造函数创建属性的时候，enumerable 、configurable 、 writable都为 true ，value、get、set都为undefined 。所以平时定义对象的时候，我们可以随意增删改查。当使用
Object.defineProperty、Object.defineProperties或Object.create函数的情况下添加的属性。enumerable 、configurable、writable都为 false；value、get、set都为undefined。
Object.defineProperty语法可以修改默认属性的默认值
Object.defineProperty(obj, prop, descriptor)
obj：需要修改属性的对象，必填
prop：需要修改的属性，必填
descriptor：属性修饰符的配置对象，不填的情况下至少要有{}
最终返回的结果是处理后的obj对象
在descriptor中可以配置数据描述符和存取描述符的所有属性，但有几点需要注意：
（1）数据描述符中的writable/value不可与存取描述符中的get/set同时存在，会报错
（2）存取描述符只写get时表示该属性只可读，只写set时表示该属性只可写
（3）存取描述符的get与set是个函数，函数里的 this 指向的是需要修改属性的对象obj
Object.defineProperties()可以劫持多个属性，若属性中还有对象，则需要深层遍历
var obj = {
name: 'javascript',
age: 8,
info: {
action: 'mutual',
feature: 'smart'
}
}
observer(obj);
obj.sex = 'female'
obj.info.face = 20;
obj.info.hobit = 'girl';
obj.age = 10;
obj.info.feature= 'small';
console.log(obj);
function observer(target) {
if (!target || typeof target !== 'object') {
return;
}
// 遍历对象中的每一个属性
Object.keys(target).forEach(function (val) {
definePro(target, target[val], val);
});
}
function definePro(curObj, curVal, curKey) {
observer(curVal); // 遍历子属性
Object.defineProperty(curObj, curKey, {
enumerable: true,
configurable: true,
get: function () {
console.log('获取属性', curVal);
return curVal;
},
set: function (newVal) {
console.log('设置属性', newVal);
curObj = newVal;
}
});
}
当设置新的属性值的时候，会触发get方法
缺点：
（1）无法检测到数组下标的变化，因此通过数组下标设置值的时候没有响应，vue中只检测了七个方法push、pop、shift、unshift、splice、sort、reverse来解决问题
（2）只能劫持对象的属性，这就需要对对象的每个属性进行遍历，当对象的属性依然是对象时需要递归，耗性能。Proxy可以劫持整个对象，这样就避免了递归+遍历
Proxy：代理
Proxy相当于是对象的代理器，需要访问或操作一个对象的时候，都要先经过代理，这样就可以对外界的访问和修改进行一些过滤
var obj = new Proxy({}, {
get: function (target, key, receiver) {
console.log(`getting ${key}!`);
return Reflect.get(target, key, receiver);
},
set: function (target, key, value, receiver) {
console.log(`setting ${key}!`);
return Reflect.set(target, key, value, receiver);
}
});
obj.name = 'html'; //setting name!
obj.name; // getting name!
这样就为
obj这个对象设置了一层代理，当设置或获取里面的属性时，会触发set/get方法
ES6提供了Proxy的构造函数，用来生成Proxy实例
var proxy = new Proxy(target, handler);
// target 表示要拦截的对象
// handler 用来指定拦截行为
要使得Proxy起作用，必须针对Proxy实例进行操作，而不是针对目标对象（上例是空对象）进行操作，若handler不设拦截行为，返回的就是原来的对象
// handler 不设置拦截行为， 设置proxy的值就相当于设置target的值
var target = {};
var handler = {};
var proxy = new Proxy(target, handler);
proxy.a = 'b';
console.log(target.a) // "b"
Proxy实例作为对象的原型，不管访问哪个属性，Proxy实例始终返回'ES6'，而obj上面没有name属性，就会在原型Proxy实例上找
var proxy = new Proxy({}, {
get: function(target, property){
return 'ES6';
}
});
var obj = Object.create(proxy);
console.log(obj.name); //ES6
未完。。。
