Object.defineProperty 和 Es6 proxy数据劫持

Object.defineProperty

const person = {
    name: 'jp',
    age: 18,
    info: {
        city: 'xi,an',
        money: Infinity
    }
}
function observe (obj) {
    if (obj && typeof obj === 'object' && obj !== null) {
        Object.keys(obj).forEach(key => {
            let value =obj[key]
            observe(value)
            Object.defineProperty(obj, key, {
                get () {
                    console.log(`获取了${key}`)
                    return value
                },
                set (val) {
                    console.log(`修改了${key}`)
                    value = val
                    observe(value)
                }
            })
        })
    }
}
observe(person)
console.log(person)
person.info.city = 'beiJing'

ES6 Proxy

const arr = [1, 2, 3, 45, { name: 'gg', age: 18 }]

/** 
  const proxy = new Proxy(target, handler)
* target: 要监听的对象，可以是一个对象，数组,函数等等 
* handler: 是一个对象，里面包含了可以监听这个对象的行为函数，比如上面例子里面的`get`与`set` 
* 同时会返回一个新的对象proxy, 为了能够触发handler里面的函数，必须要使用返回值去进行其他操作，比如修改值 
*/

let proxy = new Proxy(arr,{
    get (target, prop) {
        console.log(`获取了${prop}的值`)
        return target[prop]
    },
    set (target, prop, value) {
        console.log(`修改了${prop}的值`)
        target[prop] = value
        return true // set方法中最后都要return true 否则就会报错
    }
})
proxy[4].name = 'xx'
proxy[6] = {
    city: 'xi,an'
}