ES6学习笔记14：Proxy

Proxy基础

Proxy就如同其字面意思，就是通过代理去访问被代理的对象。熟悉Java的读者应该知道代理模式，实际上在我们访问某个对象的时候，一切都是由代理代办的。

讲起来比较绕口，实际用起来却很方便，我们直接看代码，结合代码解释。

let obj = { hello: 'HELLO WORLD' };
var handler = {
  get(target, name) {
    return name in target ?
      target[name]:
      `Hello, ${name}!`;
  }
};
let p = new Proxy(obj, handler);
console.log(p.hello); // HELLO WORLD
console.log(p.something); // Hello, something!

我们创建了一个对象，该对象有一个hello属性；构建了一个代理的handler对象，其中有一个get方法，当其被交给代理作为处理器的时候；还创建了一个代理Proxy，被代理对象是obj，处理器是hander。

代理器会劫持所有对属性的访问，交给其中的get方法，get方法中有两个参数target和name，target是被代理对象（这里就是obj），name是被访问的属性名。可以看到，在这里的get方法中，当被代理对象拥有被访问的属性时，直接返回该属性，如果不存在时，我们返回用指定模板字面量生成的字符量。

最后我们来看如何访问这个对象。首先，直接访问p.hello，这个逻辑也会经过handler.get方法处理，get方法发现被代理对象obj有hello属性，于是返回，我们得到了'HELLO WORLD'；然后访问p.something，代理器发现obj没有这个属性，于是返回字符串'Hello, something!'。

接下来我们来看看如何代理方法。

// 代理方法示例
let foo = function () { return 'I am the target'; };
let handler = {
  apply(target, ...args) {
    return 'I am the proxy';
  }
};
let p = new Proxy(foo, handler);
console.log(p());

代理的方法的的调用过程需要给一个拥有apply函数的处理器。foo的代理p被调用后的结果返回的结果是被处理器处理过之后的结果。

代理主要用在验证（合法性等），操作DOM节点（toggle），扩展构造器等。

由于ES5的局限性，Proxy无法通过Polyfill的方式实现，因此Babel不支持Proxy。

知识点总结

代理的基本用法。

Proxy基础

知识点总结

参考