JavaScript 中如何代理 Set（集合） 和 Map（映射）

ECMAScript6 中 Set 和 Map 的代理方法

1. 概述

1.1 与代理普通对象的区别

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

1.2 Set （集合）的原型属性和方法

1.3 Map （映射）的原型属性和方法

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

2. 代理的实现思路

2.1 从一个错误说起

我们想代理一个 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 就不会报错了：

2.2 代理一般原型方法

很快你就意识到，在代理对象 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也可以通过类似的思路完成代理。

为了方便为 Set/Map 类型数据创建代理，我们可将将创建代理的逻辑封装成为一个函数：

function createProxy(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      if(key === 'size') {
        return Reflect.get(target, key, target)
      }
      else {
        // ...
      }
    }
  })
}

2.3 响应式代理原理与实现

2.3.1 副作用函数与响应式数据

关于响应式数据与副作用函数更详细的介绍请参考博文《响应式数据基本原理》

先介绍一个概念——副作用函数。

所谓副作用函数，指的是当其调用执行后将会直接或者间接地影响到其它函数执行地函数。也就是说，一个函数影响到其它函数地执行，称之为副作用。

副作用函数是我们为了实现响应式数据而提出来的。响应式的目标也就是，副作用函数所依赖的某些变量（称响应式数据）发生改变时，副作用函数自动地随着这些数据的改变而重新执行。这也就意味着，一旦数据改变，由数据驱动的副作用函数对应的效果都将发生相应的变化。

2.3.2 实现响应式的基本思路

举一个例子，由一个数据 data，和一个名为effect的函数：

const data = {p:'我是p标签的文本'}
function effect(){
  const p = document.getElementsByTagName('p')[0];
  p.innerText = data.p;
}

如果说 data 是一个响应式数据，那么在这里我们希望一旦 data 的内容发生改变，则函数 effect （副作用函数）自动执行。

这个问题的关键在于——我们怎么知道数据 data 什么时候会发生改变。毕竟我们还不能定时去读取它的值做比较，这样不仅消耗的资源多，而且 data 仍然称不上响应式，因为定时读取必然有时间间距。

既然不能通过比较获知数据是否发生改变，那我们就只能从引起改变的 源头 进行入手。只要我们能够 拦截 对数据 data 的读取和设置操作，那么我们就可以在拦截中执行副作用函数、从而产生数据变化的“副效果”。

我们可以这样实现：

<p></p>
<script>
// 副作用函数容器
const container = new Set();
function createProxy(data){
  return new Proxy(data, {
    // 读取属性（方法）时，记录相应副作用函数
    get(target, key) {
      container.add(effect) // 记录副作用
      return target[key];   // 返回调用的属性或者方法（属性值可能为方法）
    },
    set(target, key, value) {
      target[key] = value;
      // 执行所有存储的副作用函数，产生副作用
      container.forEach(
        (func)=>{
          func();
        }
      )
      return true;
    }
  })
}
// 数据
const data = {text:'改变数据则响应式变化：'}
// 数据 data 对应的副作用函数
function effect(){
  const p = document.getElementsByTagName('p')[0];
  p.innerText = data.text;
}
const dataProxy = createProxy(data);
effect();
// 改变数据，则副效果自动执行
// 从而驱动实现数据响应式
setInterval(
  ()=>{
    dataProxy.text = dataProxy.text+'*';
  },2000
)
</script>

这个案例中我们使用定时器每隔 2 秒将数据在原数据上增加一个 “*”。数据改变后，可以看到数据对应的效果也自动改变，效果如下：

2.3.3 为 Set/Map 代理建立响应联系

编写中，尚未完成…

3. forEach方法的处理

4. 迭代器方法的处理

编写中，尚未完成…