ES6黄金搭档Proxy与Reflect,详解Proxy

黄金搭档Proxy与Reflect

鼎鼎大名Proxy的出现解决了对属性拦截的全方位操作，Reflect又是对Object上的API一次优雅的实现，当两者在又会有怎样的神奇效果呢？或许可以解决令你头疼的JS需求实现。
引用一下之前提到的观察者模式：

关于上面代码的解析，请看这里

寥寥几行代码就可以实现一个简易的观察者模式，这还不够嘛。
实际项目中面对复杂的逻辑实现，proxy会有更多的解决办法。

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（metaprogramming），即对编程语言进行编程。

ES6之前关于代理对象的操作，一直都是用的Object.defineProperty属性。但是此属性有许多弊端，比如著名的前端框架在面对数组变动时，无法侦听，还需要额外的方法。但是Proxy完全可以解决问题。
Proxy：可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。

var proxy = new Proxy(target, handler);

上面就是proxy的用法：
new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。

var proxy = new Proxy({}, {
  get: function(target, propKey) {
    return 'hello world!';
  }
});

proxy.c // hello world!
proxy.b // hello world!
proxy.a  // hello world!

事实上上面的代码代理了所有对象：

let obj = Object.create(proxy);
obj.time // hello world!

高阶操作：

var pipe = function (value) {
  var funcStack = [];
  var oproxy = new Proxy({} , {
    get : function (pipeObject, fnName) {
      if (fnName === 'get') {
        return funcStack.reduce(function (val, fn) {
          return fn(val);
        },value);
      }
      funcStack.push(window[fnName]);
      return oproxy;
    }
  });

  return oproxy;
}
var double = n => n * 2;
var pow    = n => n * n;
var reverseInt = n => n.toString().split("").reverse().join("") | 0;
pipe(3).double.pow.reverseInt.get; // 63

分析：
首先引擎开辟出一块空间存放匿名函数，并把这块空间的地址给了变量pipe ，接着同样的操作double,pow,reverseInt .分别代表着一个匿名函数。然后遇到函数调用pipe(3)并入参，现在进入函数内部，该函数声明了一个数组作为一个缓存，然后返回一个Proxy对象，该Proxy对象拦截了一个空对象的读操作，读操作指向另外一个匿名函数，执行该匿名函数，判断方法名是否为get操作,并将传入的方法推入缓存数组中。直到缓存数组中存入所有方法，如果方法名为get，就依次执行缓存中的函数，并初始化值为3，调用方法计算。

当然，还有Proxy的其他操作，比如set:

假定Person对象有一个age属性，该属性应该是一个不大于 200 的整数，那么可以使用Proxy保证age的属性值符合要求。

let validator = {
  set: function(obj, prop, value) {
    if (prop === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError('The age is not an integer');
      }
      if (value > 200) {
        throw new RangeError('The age seems invalid');
      }
    }

    // 对于满足条件的 age 属性以及其他属性，直接保存
    obj[prop] = value;
    return true;
  }
};

 new Proxy(person, validator);
person.age = 100;
person.age // 100
person.age = 'young' // 报错
person.age = 300 // 报错

还有其他方法，大家可以看这里
重点:

this 问题:

在 Proxy 代理的情况下，目标对象内部的this关键字会指向 Proxy 代理

const target = {
  m: function () {
    console.log(this);
  }
};
const handler = {};
const proxy = new Proxy(target, handler);
target.m() // {m: ƒ}
proxy.m()  // Proxy {m: ƒ}