响应式的代码实现

先定义一个对象 const obj = {name: 'why', age:18};

响应式的效果是：当obj对象里的name 属性或 age属性发生变化时，可以执行相应的函数 dependAge() 或 dependAge()

响应式的思路是：创建一个obj的映射

let objMap = new Map();

objMap.set('name', dependName);

objMap.set('age',dependAge);

当侦听到name或age属性发生变化时，可以通过 objMap.get('name') 或 objMap.get('age')拿到对应的depend函数并执行

在这之前，应该还要有一个侦听，就是侦听到底是哪个对象发生了改变，真实的代码里可能有很多个对象，这时候可以使用WeakMap

const weakmap = new WeakMap()

weakmap.set(obj, objMap);

这样，当侦听到obj的属性发生变化时，首先通过weakmap.get(obj)拿到objMap，然后再通过objMap.get(**)拿到对应的函数，如图

如下代码就是一个简单的响应式的实现

这里watchFn(() => {console.log(objProxy.name)})的执行顺序是这样的：首先向watchFn传入了一个箭头函数，并让箭头函数赋值给了attrFn，接着执行了该箭头函数，在执行的过程中碰到了objProxy.name,这就调用了objProxy里的get方法，这里attrFn还是该箭头函数，而不是null,在get函数里拿到了depend实例之后通过调用depend.addFn()，就将attrFn传入了reactives集合中。reactives之所以是集合而不是数组，是因为要确保传入的函数不重复。这样通过get操作，depend实例里的reactives就有了一个函数，那么在之后objProxy.name='kobe',触发了set，拿到的depend实例里的reactives也就有了函数，所以直接调用depend.execute()直接执行reactives里面的函数即可