js数组方法监控

vue2.0源码 - 数组监控方法：

思路：

拦截数组方法，原型链指向自己定义的原型，内部实际还是调用的原生方法。。。

下边switch是判断数据是否需要定义响应式，可忽略！

let obj= {
    test:[1,2,3]
}
let old = Array.prototype
let o = Object.create(old)
const methods = [
    'unshift',
    'pop',
    'sort',
    'reverse',
    'splice',
    'push'
]
methods.forEach(method => {
    o[method] = function (...arg) {
        let result = old[method].apply(this, arg)
        let varible
        console.log(`用户调用了 ${method}`)
        switch(method) {
            case 'push':
            case 'unshift':
                varible = arg
                break
            case 'splice':
                varible = arg.slice(2)
        }
        return result
    }
})
obj['test'].__proto__ = o
console.log(obj['test'].push('123'))

 

 

补充:

Object.create （） 创建一个全新的对象

创建一个全新的对象，它的原型为：现有对象，也就是传的参数，此时，新创建的对象的__proto__（指向原型）就是传的参数。

参数：必传，null或对象

eg：

let proto = {
    info: 'test',
    intro: function() { console.log(`my name is ${this.myname}`)}
}
let person = Object.create(proto)
person.myname = 'lxc'
person.intro()