Object.defineProperty方法

对象的属性在创建的时候，都会带有属性描述符，分为数据描述符和存取描述符

数据描述符是具有值的属性，改属性值可能可写，也可能只读，有四个可选键值
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

未完。。。