# 简略版+自己的注释

// 判断一个变量是否是对象
function isObject(obj) {
  return obj.constructor === Object
}
class Observer {
  constructor(value) {
    this.value = value;
    if (!arr.isArray(value)) {
      this.walk(value);
    }
  }
  walk(obj) {
    const keys = Object.keys(obj);
    // 循环将obj中的每一个属性转换成getter/setter进行变化追踪
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i], obj[keys[i]]);
    }
  }
}
function defineReactive(data, key, val) {
  if (isObject(val)) {
    new Observer(val); // 进行递归调用
  }
  let dep = new Dep();
  Object.defineProperty(data, key, {
    configurable: true,
    enumerable: true,
    get: function () {
      dep.depend();
      return val;
    },
    set: function (newVal) {
      if (val === newVal) return
      // 如果赋值的新值也是一个对象 也需要进行侦测
      if (isObject(newVal)) {
        new Observer(val); // 进行递归调用
      }
      val = newVal;
      dep.notify(); // 通知所有的订阅者，数据要被修改了，做出相应的行为(也就是执行对应的回调函数)
    }
  })
}
class Dep {
  constructor() {
    this.subs = [] // 这个里面存放的是Watch实例对象
  }
  addSub(sub) {
    this.subs.push(sub); // 在这个地方收集订阅者
  }
  removeSub(sub) {
    remove(this.subs, sub);
  }
  depend() {
    if (window.target) {
      this.addSub(window.target); // 在这个地方触发depend方法，进行收集订阅者
    }
  }
  notify() {
    const subs = this.subs.slice();
    for (let i = 0; i < subs.length; i++) {
      subs[i].update(); // 在这个地方执行回调函数
    }
  }
}
function remove(arr, item) {
  if (arr.length) {
    const index = arr[item];
    if (index > -1) {
      return arr.splice(index, 1);
    }
  }
}
class Watcher {
  constructor(vm, expOrFn, cb) {
    this.vm = vm;
    this.getter = parsePath(expOrFn);
    this.cb = cb;
    this.value = this.get(); // 获取expOrFn中的值 在这个内部同时会触发getter，从而在dep中添加自己
  }
  get() {
    window.target = this; // 将watch实例对象赋值给全局的target变量上
    let value = this.getter.call(this.vm, this.vm); // 该代码的作用很关键
    // 如果expOrFn直接是一个表达式不是一个函数 eg: 'name', 'age' 假设只有一个属性 不是这种的 'name.a.b'
    // 我们就可以直接下面这样写，只是为了测试理解，vue.js源码处理更加全面
    // let value = this.vm[this.expOrFn] // vm就是要监听的数据，当然expOrFn要在constructor中挂在到this身上
    window.target = undefined;
    return value;
  }
  update() {
    const oldValue = this.value;
    this.value = this.get();
    this.cb.call(this.vm, this.value, oldValue);
  }
}
// 该方法的作用是将 'name.a.b'这种表达式的值取出来
// 也就是通过该方法返回的是 obj['name']['a']['b]的值
function parsePath(path) {
  const bailRE = /[^\w.$]/;
  const segments = path.split('.')
  // 闭包
  return function (obj) {
    for (let i = 0; i < segments.length; i++) {
      if (!obj) return
      obj = obj[segments[i]] // 取出属性的值 所以这个地方会执行getter
    }
    return obj; // 返回属性的值
  }
}