使用Proxy和Reflect实现观察者模式

shenpapa

于 2021-01-18 22:18:30 发布

阅读量181

点赞数 1

分类专栏：好好学习文章标签： js 设计模式 javascript proxy es6

本文链接：https://blog.youkuaiyun.com/shenpapa/article/details/112796317

版权

好好学习专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现观察者模式的方法。通过创建代理对象并利用Proxy和Reflect API来监听对象属性的变化，并在变化发生时通知所有观察者。文章提供了一个具体的例子，展示了如何设置观察者并触发更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function createObsever(obj) {
	// 观察者
    const observers = []
    //使用proxy代理对象，使用Reflect保证默认行为
    const proxyObj = new Proxy(obj, {
        set(target, p, value, receiver) {
            Reflect.set(target, p, value, receiver)
            observers.forEach(fn => fn())
        }
    })
    // 返回代理对象和添加观察者的方法
    return {
        proxy: proxyObj,
        setObserver: function (fn) {
            observers.push(fn)
        }
    }
}

const obj = {
    a: 1,
    b: 2
}
const pro = createObsever(obj)
pro.setObserver(() => { console.log(1) })
pro.proxy.a = 12
console.log(obj.a)

打印结果

在这里插入图片描述