检测对象属性值的修改

最新推荐文章于 2023-05-09 21:30:00 发布

原创最新推荐文章于 2023-05-09 21:30:00 发布 · 977 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #属性拦截 #proxy #defineProperty

Javascript 专栏收录该内容

32 篇文章

订阅专栏

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。