使用Proxy实现观察者模式

es6的Proxy可以看做是在目标对象之前架设一层拦截，每次对目标对象进行操作的时候，都要经过这层拦截。常见的一般是用来拦截set和get。目标对象通过set和get来进行赋值和获取值，所以，在这之前，通过使用Proxy可以实现对信息的过滤或者修改等等操作。

所谓观察者模式，在之前的文章中（JavaScript自定义事件）也提到过，这里就不在赘述。

主要是通过拦截set和deleteProperty，在每次赋值和delete属性的时候，触发所有观察者事件。

const queuedObservers = new Set()
const observe = fn => queuedObservers.add(fn)
const observable = obj => (
    new Proxy(obj, {
        //拦截set，obj每次赋值都触发所有观察者事件
        set(target, name, value, receiver) {
            //确保正常赋值
            const result = Reflect.set(target, name, value, receiver)
            queuedObservers.forEach(observer => observer())
            return result
        },
        deleteProperty(target, property) {
            Reflect.deleteProperty(target, property)
            queuedObservers.forEach(observer => observer())
        }
    })
)

const person = observable({
    name: 'Jason',
    age: 10
})

const print = function () {
    console.log(`打印信息：${JSON.stringify(person)}`);
}

//添加print订阅
observe(print)

person.id = 1 //打印信息：{"name":"Jason","age":10,"id":1}
delete person.id //打印信息：{"name":"Jason","age":10}