object.defineProperty实现数据劫持

本文使用object.defineProperty 实现监听对象属性变化

现有一个监听属性的方法：

function observe(data){
    if (!data || typeof data !== 'object') {
      return;
    }
    // 取出所有属性遍历
    Object.keys(data).forEach(key =>{
        defineProp(data, key, data[key])
    })
}

然后我们需要一个真正监听属性的方法defineProp：

function defineProp (data, key, childVal) {
    observe(childVal) //监听子属性
    // 精华部分
    Object.defineProperty(data, key, {
    set: (newVal) => {
        console.log(`哈哈哈监听到啦！原来的值是${childVal}, 变为${newVal}`)
        childVal = newVal;
    },
    get: () =>{
        return childVal
    },
    enumerable: true, // 可枚举
    configurable: false, // 不能再define
    })
}

大功告成，我们来试一下：

observe(test)
test.name = 'newName'
console.log(test.name, 'ddd')
test.name = 'newName2'
console.log(test.name, 'ddd')

// 哈哈哈监听到啦！原来的值是sss, 变为newName
// newName ddd
// 哈哈哈监听到啦！原来的值是newName, 变为newName2
// newName2 ddd