实现mobx的autorun函数

  // autorun的使用
  const obj = observable({ a: 1, b: 2 });
  autoRun(() => {
    console.log(obj.a); //输出1
  });
  obj.b = 3; //什么都不会发生
  obj.a = 2; //这时会再次执行autorun中的函数，打印2

// 为什么？ 因为 autorun 中的函数依赖了 obj.a，所以当 a 有变动时，自热会再次执行函数

//proxies: 储存所有代理对象
const proxies = new WeakMap();
//observers: 储存所有观察函数
const observers = new WeakMap();
//注：使用Map结构是为了存储代理对象时以原对象作为key，使用更方便

/*
 * queuedObservers: observer执行队列
 * 这里采用Set结构是为了去重
 * 防止在当前调用栈中多次添加同一个observer，
 * 如observableData.a = xx; observableData.b = xx
 * 这种情况下observableData.a的observer只应添加一次
 */
let queuedObservers = new Set();
// queued: 当前是否处于observer队列执行中
let queued = false;
// currentObserver: 当前观察者,也就是autoRun执行时的函数
let currentObserver = null;

/**
 *关联observer到目标对象的key
 *
 * @param {*} target 目标对象
 * @param {*} key 注册observer的key
 */
function registerObserver(target, key) {
  const fns = observes.get(target) || {};
  fns[key] = fns[key] || [];
  fns[key].push(currentObserver);
  observes.set(target, fns);
}

/**
 *队列中插入observer
 *
 * @param {*} target 观察对象
 * @param {*} key key
 */
function queueObservers(target, key) {
  // 取得当前target注册过的所有observers
  const registerObservers = observes.get(target);
  if (registerObservers && registerObservers[key]) {
    // 当前队列中存在的observers
    const existObservers = Array.from(queuedObservers);
    queuedObservers = new Set(existObservers.concat(registerObservers[key]));
    invokeObserves();
  }
}

/**
 *执行队列中的所有observer
 *
 * @returns
 */
function invokeObserves() {
  if (queued) {
    return;
  }

  queued = true;

  // 在下一个事件循环里取出所有队列中的所有observer并执行
  setTimeout(() => {
    for (let observer of queuedObservers) {
      observer();
    }
    queued = false;
    queuedObservers.clear();
  }, 0);
}

//observable函数
function observable(obj) {
  return proxies.get(obj) || toObservable(obj);
}

function toObservable(obj) {
  const proxyObj = new Proxy(obj, {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver);
      const resultIsObject = result && typeof result === 'object';
      if (currentObserver) {
        registerObserver(target, key);
      }
      return resultIsObject ? observable(result) : result;
    },
    set(target, key, value, receiver) {
      if (key === 'length' || value !== Reflect.get(target, key, receiver)) {
        queueObservers(target, key);
      }
      return Reflect.set(target, key, value, receiver);
    }
  });
}

//autoRun
function autoRun(fn) {
  currentObserver = fn;
  fn();
  currentObserver = null;
}

const observableData = observable({
  name: 'xiaoming',
  age: 18,
  sex: 'male',
  hobbies: ['basketball', 'swim']
});

autoRun(() => {
    console.log(observableData.name) // xiaoming
});

autoRun(() => {
    console.log(observableData.hobbies) // ['basketball', 'swim']
})

observableData.name = 'xiaohe';
observableData.name = '小红';
observableData.hobbies.push('music');

//监测到name和hobbies属性变动
//打印结果： '小红', ['basketball','swim','music'];