Proxy实现数据响应式

2024 年 5 月 7 日星期二

摘要

这段代码定义了一个`watcher`函数，通过`Proxy`实现监听对象属性的变化。然后创建了一个`obj`对象，和两个用于输出日志的函数`getLogger`和`setBind`。最后使用`watcher`函数对`obj`对象进行监听，输出了属性`a`的获取和修改操作。

let watcher = (target,getLogger,setBind) => {
    let handler = {
        get(target,property,receiver){
            getLogger(target,property)
            return Reflect.get(target,property,receiver)
        },
        set(target,property,vlaue){
            setBind(target,property)
            return Reflect.set(target,property,vlaue)
        }
    }

    return new Proxy(target,handler)
}

let obj = { a: 1 };

let getLogger = (target, property) => {
    console.log(`Getting property '${property}'`);
};

let setBind = (target, property, value) => {
    console.log(`Setting property '${property}' to value '${target[property]}'`);
};

let p = watcher(obj, getLogger, setBind);

console.log(p.a); 

p.a = 2;