class Dep { constructor() { this.subs = new Map(); } addSub(key, sub) { const hasSub = this.subs.get(key); if (hasSub) { hasSub.add(sub); } else { this.subs.set(key, new Set([sub])); } } notify(key) { if (this.subs.get(key)) { this.subs.get(key).forEach(sub => { sub.update(); }); } } } class Watcher { constructor(obj, key, cb) { this.obj = obj; this.key = key; this.cb = cb; // 回调 this.value = this.get(); // 获取老数据 } get() { Dep.target = this; let value = this.obj[this.key]; Dep.target = null; return value; } // 将订阅者放入待更新队列等待批量更新 update() { let newVal = this.obj[this.key]; if (this.value !== newVal) { this.cb(newVal); } } } function Observer(obj) { Object.keys(obj).forEach(key => { // 做深度监听 if (typeof obj[key] === 'object') { obj[key] = Observer(obj[key]); } }); let dep = new Dep(); let handler = { get: function (target, key, receiver) { Dep.target && dep.addSub(key, Dep.target); return Reflect.get(target, key, receiver); }, set: function (target, key, value, receiver) { let result = Reflect.set(target, key, value, receiver); dep.notify(key); return result; } }; return new Proxy(obj, handler) } let data = { name: '渣渣辉' }; function print1(data) { console.log('我系', data); } function print2(data) { console.log('我今年', data); } data = Observer(data); new Watcher(data, 'name', print1); data.name = '杨过'; // 我系 杨过 new Watcher(data, 'age', print2); data.age = '24'; // 我今年 24 console.log(data);