es6的观察者模式_es6观察者模式

const queuedObservers = new Set();

const observe = fn => queuedObservers.add(fn);
const observable = obj => new Proxy(obj, {set});

function set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
queuedObservers.forEach(observer => observer());
return result;
}

const person = observable({
name: ‘张三’,
age: 20
});

function print() {
console.log(${person.name}, ${person.age})
}

observe(print);
person.name = ‘李四’;

打印结果

Reflect.set(target, name, value, receiver)
将 target 的 name 属性设置为 value。返回值为 boolean ，true 表示修改成功，false 表示失败。
当 target 为不存在的对象时，会报错。
1
2
3

Proxy
一个 Proxy 对象由两个部分组成： target 、 handler 。在通过 Proxy 构造函数生成实例对象时，需要提供这两个参数。 target 即目标对象， handler 是一个对象，声明了代理 target 的指定行为。
1
2

let target = {
    name: 'Tom',
    age: 24
}
let handler = {
    get: function(target, key) {
        console.log('getting '+key);
        return target[key]; // 不是target.key
    },
    set: function(target, key, value) {
        console.log('setting '+key);
        target[key] = value;
    }
}
let proxy = new Proxy(target, handler)
proxy.name     // 实际执行 handler.get
proxy.age = 25 // 实际执行 handler.set
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

let proxy = new Proxy(target, handler)可以看到
每个类 都默认有get 和set 两方法
而且会把target的key和value传给handler 这事很神奇的事情
也就是说

const observable = obj => new Proxy(obj, {set});

function set(target, key, value, receiver) {
  const result = Reflect.set(target, key, value, receiver);
  queuedObservers.forEach(observer => observer());
  return result;
}这里会把obj的key和value都传到 set 里面   set函数等于重写了赋值操作 等于干掉了原来的赋值操作 所以要重写赋值操作 


1
2
3
4
5
6
7
8
9