为什么defineProperty不能检测到数组长度的“变化” #

var object1 = new Object()
object1.name = 'a'

var object2 = {}
object2.name = 'b'

var object3 = {}
Object.defineProperty(object3, 'name', {
  enumerable: true,
  configurable: true,
  get() {
    return 'c'
  },
  set() {
    // do
  }
})

// 假设我们想修改a的值为123
var object = { a: 1 }
Object.defineProperty(object, 'a', {
  enumerable: true,
  configurable: true,
  get() {
    // 不能在函数中引用属性a，否则会造成循环引用
    // 错误
    return this.a + '23'
    // 正确
    return val + '23'
  },
  set(newVal) {
    // 为了在原属性值的基础上修改属性，我们可以利用闭包的特性
    // 在初始化对象的时候会调用set函数，此时将属性（例如a）的值用闭包保存起来
    // 接着取值的时候，就利用闭包中变量的值修改即可
    val = newVal
  }
})
// 其实也就是一个先赋值再取值修改的过程

enumberable: false
configurable: false
writable: true

var a = [a, b, c]
a.length = 10
// 只是显示的给length赋值，索引3-9的对应的value也会赋值undefined
// 但是索引3-9的key都是没有值的
// 我们可以用for-in打印，只会打印0,1,2
for (var key in a) {
  console.log(key) // 0,1,2
}

// 还是老套路，定义一个observe方法
function defineReactive(data, key, val) {
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
     get: function defineGet() {
      console.log(`get key: ${key} val: ${val}`)
      return val
    },
     set: function defineSet(newVal) {
      console.log(`set key: ${key} val: ${newVal}`)
      // 还记得我们上面讨论的闭包么
      // 此处将新的值赋给val，保存在内存中，从而达到赋值的效果
      val = newVal
    }
  })
}
function observe(data) {
  Object.keys(data).forEach(function(key) {
    defineReactive(data, key, data[key])
  })
}

let test = [1, 2, 3]
// 初始化
observe(test)

if (Array.isArray(value)) {
  const augment = hasProto
    ? protoAugment
    : copyAugment
  // 判断数组实例是否有__proto__属性，有就用protoAugment
  // 而protoAugment司机就是重写实例的__proto__
  // target.__proto__ = src
  // 将新的arrayMethods重写到value上
  augment(value, arrayMethods, arrayKeys)
  // 然后初始化observe已存在索引的值
  this.observeArray(value)
} else {
  this.walk(value)
}

const arrayProto = Array.prototype
// 复制了数组构造函数的原型
// 这里需要注意的是数组构造函数的原型也是个数组
// 实例中指向原型的指针__proto__也是个数组
// 数组并没有索引，因为length = 0
// 相反的拥有属性，属性名为数组方法，值为对应的函数
export const arrayMethods = Object.create(arrayProto)

// 对以下方法重写
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

methodsToPatch.forEach(function (method) {
  // cache original method
  const original = arrayProto[method]
  // 这里的def很重要，其实也就是用object.defineProperty重新定义属性
  // 但这里的arrayMethods是个数组，这就是为什么上面我们解释
  // 数组构造函数原型是个空数组但是默认了属性方法
  // 所以这里的定义是很巧妙的
  def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args)
    // ob就是observe实例
    const ob = this.__ob__
    let inserted
    switch (method) {
      // 为什么对push和unshift单独处理？
      // 我们在上看解释过，这2中方法会增加数组的索引，但是新增的索引位需要手动observe的
      case 'push':
      case 'unshift':
        inserted = args
        break
      // 同理，splice的第三个参数，为新增的值，也需要手动observe
      case 'splice':
        inserted = args.slice(2)
        break
    }
    // 其余的方法都是在原有的索引上更新，初始化的时候已经observe过了
    if (inserted) ob.observeArray(inserted)
    // notify change
    // 然后通知所有的订阅者触发回调
    ob.dep.notify()
    return result
  })
})