检测对象属性值的修改

let obj = {
    name: 'dailoge',
    age: 23
}

function bindData(obj, func) {
    const tmp = Object.assign({}, obj)
    Object.keys(obj).map(key => {
        Object.defineProperty(obj, key, {
            set(newValue) {
                tmp[key] = newValue
                func.call(tmp, key)
            },
            get() {
                return tmp[key]
            }
        })
    })

}

function func(key) {
    console.log(`检测到 ${key} 发生变化, 新的值: ${this[key]}`)
}

bindData(obj, func)

obj.name = 2
obj.age = 24
obj.newKey = 1

console.log(obj.name)

 如果用Proxy 必须通过构造函数的返回值进行操作,才会生效。如下代码示例:

const newObj = new Proxy(obj, {
    get(target, key){
        return target[key]
    },
    set(target, key, value){
        target[key] = value
    }
})

newObj.name = 11 // 修改的 newObj,而非修改 obj

所以这里不适合用 Proxy。

 


版权声明:本文为Dailoge原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。