ES6 Proxy 代理

Proxy简单介绍

ECMAscript 6新增的代理可以给目标对象定义一个关联的代理对象，而这个代理对象可以作为抽象的目标对象来使用，在对目标对象的各种操作影响目标对象之前，可以在代理对象中对这些操作加以控制。代理对象可以作为目标对象的替身，但又完全独立于目标对象。（摘自Javascript高级程序设计）

Proxy对象用于创建一个对象的代理，是用于监听一个对象的相关操作。代理对象可以监听我们对原对象的操作。

我的理解就是：Proxy就是使用者和目标对象之间的一个中间商，使用者和对象之间的操作需要中间商代为完成，并且在完成使用者对对象的操作的前提下，中间商可以多加一点操作达到自己的目的。

重点

1. Proxy 只能代理对象。
2. 代理指的是对一个对象基本语义的代理。读取和设置对象的属性都是基本语义，因为它们是一步就可以完成的操作。而调用一个对象内的函数就不是基本操作，因为它需要两步操作，第一步先拿到函数属性，第二步执行。
3. 不能用 instanceof 判断代理对象的类型，因为 Proxy.prototype 是 undefined。
4. 代理也可以代理另外一个代理形成多层拦截，如下例子：

let obj = {name:'孤城浪人'}
let proxy = new Proxy(obj,{
  get(target,property){
    console.log('第一层代理触发'); // 输出顺序：2
    return target[property];
  }
});
let proxy1 = new Proxy(proxy,{
  get(target,property){
    console.log('第二层代理触发');  // 输出顺序：1
    return target[property];
  }
});
console.log(proxy1.name); // 输出顺序：3

Proxy 基本使用

代理对象 Proxy 通过 new 操作符实例化，实例化时要传入两个参数，参数一：目标对象；参数二：处理程序对象（捕获器），这两个参数是必须的，少任何一个都会报错。

创建空代理

可以看到在实例化 Proxy 时，传入的处理程序对象为空对象，也就是说本次代理对象（中间商）不会私自做任何操作。

const obj = {
    name: "孤城浪人",
    age: 18,
    sex: "男"
};
const ProxyObj = new Proxy(obj, {});

JS进阶 | Proxy代理对象juejin.cn/post/706086…

ES6（六）proxy（代理）对象，一张“有灵魂”的拦截网blog.csdn.net/weixin_5726…