1. 概述

• 1.1 与代理普通对象的区别
• 1.2 Set （集合）的原型属性和方法
• 1.3 Map （映射）的原型属性和方法

2. 代理的实现思路

• 2.1 从一个错误说起
• 2.2 代理一般原型方法
• 2.3 响应式代理原理与实现

Set 和 Map 与普通对象的一个区别是他们具有普通对象没有的属性和方法。代理 Set 和 代理 Map 的思路基本一致，只不过比代理普通对象要麻烦了许多。关键在于你需要完成 Set 和 Map 各具体原型方法的代理实现。因此，在实现对 Set 和 Map 的代理之前，我们需要大略过一下 Set 和 Map 的原型属性与方法。

温馨提示：Map 在编程语言中不叫 地图，而是 映射。

我们想代理一个 Set 对象实例，于是这样做了：

const s = new Set([1, 2]);
const s_proxy = new Proxy(s, {})

接着我们尝试通过代理对象 s_proxy 获取 s 的 size：

s_proxy.size

这时错误产生了：

上面的报错意思是说：在不兼容的接收器 #<Set >上调用了方法 get Set.prototype.size。
这表明，我们直接想要不定义任何东西使用Proxy来代理 Set，首先在 size 属性上就没有成功。为什么的？

这是因为 Set.prototype.size 是一个 get 访问器属性（它的 set 存储器属性未定义）。当调一个Set用该属性时：

因此我们需要在船舰代理对象时增加 getter 拦截方法，并使访问器属性 size 的 getter 函数执行时， this 指向被代理的 Set 对象实例，而不是 代理对象自己：

const s = new Set([1, 2]);
const s_proxy = new Proxy(s, {
  get(target, key, receiver) {
    // 对于 size 属性
    if(key === 'size') {
      // 返回 target['size'], target 表示被代理的目标对象
      return Reflect.get(target, key, target)
    }
    // 其它属性
    else{
      // 仍返回 receiver[key]
      // receiver表示 Proxy 或者继承 Proxy 的对象
      return Reflect.get(target, key, receiver)
    }
  }
})

【注】：
Reflect.get 方法就如同属性访问器语法(target[propertyKey]) 从对象中读取属性，只不过 Reflect.get 方法 是通过一个函数执行来操作的：

Reflect.get(target, propertyKey[, receiver])

• target: 需要取值的目标对象
• propertyKey: 需要获取的值的键值
• receiver: 如果target对象中指定了getter，receiver则为getter调用时的this值
  返回属性的值。

现在，我们的代理对象上访问 size 就不会报错了：

很快你就意识到，在代理对象 s_proxy 上同样无法使用 add()、clear()、delete() 等等 Set 的原型方法。

很显然，这个问题和 访问器属性 size 不那么一样：
由于 size 是一个Set实例上的访问器属性，我们要使用 s_proxy.size 只需要通过修改 receiver 来改变访问器 getter 函数的 this 指向。
但是 add() 这些函数不像调用 s_proxy.size 会自动执行 getter，不论如何修改 receiver ，访问 s_proxy.add 对应的 add() 方法并没有执行（而访问 s_proxy.set 对应的 get(...)方法会执行 ），因此这些方法执行时的 this 仍然指向着 代理对象 s_proxy而不是被它所代理的 s：

因此我们的目标还是在像一个办法，当执行这些方法是将方法与原始数据对象target绑定。

const s = new Set([1, 2]);
const s_proxy = new Proxy(s, {
  get(target, key, receiver) {
    if(key === 'size') {
      return Reflect.get(target, key, target)
    }
    else{
      return target[key].bind(target);
    }
  }
})

当调用的是方法时，target[key] 返回就是代理对象上名为 key 的属性，如果是方法则返回的是方法。比如，访问代理对象上的 add 方法时：

s_proxy.add(3)

target[key] 返回的是 ƒ add() { [native code] }，也就是 add 函数。

因此，target[key].bind(target);也就是将这个 add() 函数绑定到 target（被代理对象）上。换句话说就是将 target[key] 返回的函数的 this 指向原始对象 target。

【注】
Function.prototype.bind()方法
该方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。
其语法格式为：

function.bind(thisArg[, arg1[, arg2[, ...]]])

• thisArg：调用绑定函数时作为 this 参数传递给目标函数的值。
• arg1, arg2, …：当目标函数被调用时，被预置入绑定函数的参数列表中的参数。

返回：返回一个原函数的拷贝，并拥有指定的 this 值和初始参数。

可知，不仅是 add 方法，其它的方法如 delete、clear 等等，一旦访问的时候后悔这样绑定到原始对象上执行。

不仅是 Set，Map也可以通过类似的思路完成代理。

编写中，尚未完成…