vue.js 源代码学习笔记 ----- core array.js

/*
 * not type checking this file because flow doesn't play well with
 * dynamically accessing methods on Array prototype
 */

import { def } from '../util/index'

const arrayProto = Array.prototype

// Object.create 如果传入的是数组, 那么这个数组会被封装成一个对象,这个对象作为目标对象的__proto__属性缓存起来
// arrayMethods变成一个新对象, 通过 arrayMethods.__proto__.concat可以访问到原来的数组方法
// 这样就为 Object.definedProperty创造了条件
export const arrayMethods = Object.create(arrayProto)

/**
 * Intercept mutating methods and emit events
   这几个操作都会改变数组本身, 像slice不会改变数组本身, 这里没列出
 */
;[
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
.forEach(function (method) {
  // cache original method  获得数组的原型方法, 并缓存
  const original = arrayProto[method]
 
 // arrayMethods 已经是一个对象, 带有__proto__属性, 下有各种原生数组方法
  def(arrayMethods, method, function mutator () {
    // avoid leaking arguments:
    // http://jsperf.com/closure-with-arguments
    let i = arguments.length

    //作者看上去不喜欢用 [].slice.call , 具体没明白, 好像是slice获取arguments在有的浏览器会有参数泄露问题.
    const args = new Array(i)

    while (i--) {
      args[i] = arguments[i]
    }
    
    //先执行原生的方法, 这里的this 就是指向 arrayMethods
    const result = original.apply(this, args)
    const ob = this.__ob__

    let inserted
    switch (method) {
      case 'push':
        inserted = args
        break
      case 'unshift':
        inserted = args
        break
      case 'splice':
　　　　 //因为 siplce (0,2,a,b) 这里是要取得新插入的数组值 a b
        inserted = args.slice(2)
        break
    }
    
    //如果有新增的值, 监听一下
    if (inserted) ob.observeArray(inserted)
    // notify change 通知改变
    ob.dep.notify()
    
    return result
  })
})