高级前端
手写代码
【Q603】在 JS 中如何监听 Object 某个属性值的变化

在 JS 中如何监听 Object 某个属性值的变化

Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 620 (opens in a new tab)

Author 回答者: txd688 (opens in a new tab)

let obj = {
    a:'元素a',
    b:'元素b'
}
const handle = {
    get:(obj,prop)=>{
        console.log(`正在获取:${prop}`);
        return obj[prop];
    },
    set:(obj,prop,value)=>{
        console.log(`正在修改元素:将${prop}属性设置为${value}`);
        obj[prop] = value;
    }
}

const proxy = new Proxy(obj,handle);

console.log(proxy.a)
//正在获取:a
// 元素a

proxy.a='123'
// 正在修改元素:将a属性设置为123

console.log(proxy);
//Proxy {a: "123", b: "元素b"}

Author 回答者: shfshanyue (opens in a new tab)

在 JS 中可以使用两种方式监听属性值变化

Proxy

Object.defineProperty