手撕观察者模式

简述

观察者模式指的是一个目标对象被多个观察者对象监听，当目标对象监听的属性发生变化时，主动向观察者发送通知。

实现

ES5

ES5 可以通过Object.defineProperty来设置set和get进行拦截来实现该模式。

代码

var observedObj = { _no: 1 };
var observerObj = { _no: 1 };

function observer(oldVal, newVal) {
    console.log('observed的no属性值变为' + newVal);
    observer._no = newVal;
}

Object.defineProperty(observedObj, 'no', {
    set: function(newVal) {
        observer(this._no, newVal);
        this._no = newVal;
    },
    get: function() {
        return this._no;
    },
});

observedObj.no = 2;
console.log('observedObj: ', observedObj, '\nobserverObj: ', observerObj);

输出

observedObj的no属性值变为2
observedObj:  { _no: 2 }
observerObj:  { _no: 2 }

ES6

使用 ES6 新特性 Proxy 和 Reflect 结合使用监听对象属性

代码

class Obj {
    constructor(no) {
        this.no = no;
    }
}

var observedObj = new Obj(1);
var observerObj = new Obj(1);

const handler = {
    set: function(observed, key, value) {
        if (key === 'no') {
            observer(key, observed[key], value);
        }
        Reflect.set(observed, key, value);
    },
};

var observerProxy = new Proxy(observedObj, handler);

function observer(key, oldVal, newVal) {
    console.log(`observedObj的no属性值由${oldVal}变为${newVal}`);
    observerObj[key] = newVal;
}

observerProxy.no = 2;
console.log('observedObj: ', observedObj, '\nobserverObj: ', observerObj);

输出

observedObj的no属性值由1变为2
observedObj:  Obj { no: 2 }
observerObj:  Obj { no: 2 }