什么是观察者模式

观察者模式是软件设计模式的一种。在此种模式中，一个目标对象管理所有相依于它的观察者对象，并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法来实现。此种模式通常被用来实时事件处理系统。简单的说，就是在数据发生改变时，对应的处理函数自动执行。javascript中观察者模式，主要有两种：es5的 getter/setter和es6的proxy、reflect。下面来详细介绍这两个。

ES5 getter/setter

在ES5中主要是通过Object.defineProperty方法定义对象属性的设置和获取，并在进行设置时执行相关的处理函数。Object.defineProperty()存在两种属性描述符：

数据描述符

configurable：数据可改变
enumerable：可枚举
value：属性值
writable：可读写
存取描述符*
get:一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。
set:一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。
我们通过一个例子来测试一下：
首先，建立一个英雄（Hero）对象并赋予其一些属性：

let hero = {
  name:'赵云',
  hp: 100,
  sp: 100
}

然后使用Object.defineProperty()来对其具有的一些属性进行修改，并且在控制台输出修改的内容：

Object.defineProperty(hero, 'hp', {
  set (val) {
    console.log(`Set hp to ${val}`);
    return val;
  }
})

hero.hp = '200';
// --> Set hp to 200

我们再修改一下英雄的属性，假设英雄拥有很多装备：

let hero = {
  name:'赵云',
  hp: 100,
  sp: 100,
  equipment:['马','长枪']
}

我们把“佩剑”添加到英雄的装备中，并且输出在控制台：

Object.defineProperty(hero.equipment, 'push', {
  value () {
    this[this.length] = arguments[0];
  }
})

hero.equipment.push('佩剑');
console.log(hero.equipment);

// --> [ '马','长枪', '佩剑' ]

由此，我们可以看到对象的属性变化可以依靠get()和set()方法去追踪和改变；但对于数组则需要使用value()方法实现。

显然，这不是最好的方法，那有没有更好的方法可以简化对象或数组属性变化呢？答案是显然的，也就是我们接下来要讲述的proxy和reflect

Proxy和Reflect

1.proxy

Proxy正常翻译做代理，可以作用与对象或者函数上，数据ES6的新特性之一，用以实现js的元编程。

const proxy = new Proxy();

使用Proxy，可以对函数或者对象的一些操作进行“代理”，或者这个地方叫做拦截会更合适一些。也就是说，使用代理，可以拦截对象或者函数的一些操作，这些操作包括但不限于：读、写、in等等操作。
我们先来看Proxy的构造函数

(target: T, handler: ProxyHandler): T

从函数定义可以看出，Proxy在构建的时候，需要传入被代理的对象target以及一个handler。
被代理的对象可以是一个空对象{}，那handler是什么呢？
handler实际上是一个对象，其记录了需要代理的行为，以及代理的方法。一个典型的handler定义如下

const handler = {
  get(target, propKey, receiver) {
    console.log('GET '+ propKey);
       // do other thing...
  },
  set(target, propKey, value, receiver) {
       console.log('SET ' + propKey);
       // do other thing...
   },
}

在我们对Proxy有了一定了解后，可以尝试解决上一节的问题。
首先，还是定义一个英雄：

let hero = {
  name:'赵云',
  hp: 100,
  sp: 100,
  equipment:['马','长枪']
}

接着，定义一个handler：

let handler = {
  set(target, property, value) {
    console.log(`hero's ${property} change to ${value}`);
    target[property] = value;
    return true;
  }
}

然后，修改英雄的hp值

let heroProxy = new Proxy(hero, handler);
heroProxy.hp = 200;
// --> hero's hp change to 200
console.log(hero.hp);
// --> 200

最后，同样把“佩剑”添加到英雄的装备中

let heroProxy = new Proxy(hero.equipment, handler);
heroProxy.push('佩剑');
// --> hero's 2 change to 佩剑
// --> hero's length change to 3
console.log(hero.equipment);
// --> ["马", "长枪", "佩剑"]

可以发现，heroProxy.push('佩剑');触发了两次set，原因是push即修改了hero.equipment的内容，又修改了hero.equipment的length。

2.Reflect

Reflect是ES6的另一个新特性，主要用户对象上，实现了JS的反射。这里的反射和JAVA的理解差不多。可以把对象的结构及其他相关信息“反射出来”。通过这个新对象，可以方便的获取到对象的结构、props、参数函数等等，并且可以以更优雅的方式来调用props里的方法而避免一些问题的发生。我们利用reflect，对上面例子进行改写：

let hero = {
  name: '赵云',
  hp: 100,
  sp: 100,
  equipment: ['马', '长枪']
}

let handler = {
  get(target, name, receiver) {
    if (name === "name") {
      console.log("success");
    } else {
      console.log("failure");
    }
    return Reflect.get(target, name, receiver);
  }
}

let heroProxy = new Proxy(hero, handler);
console.log(heroProxy.name);
// --> success
// --> 赵云

3.使用场景

下面给出一个利用proxy、reflect实现双向绑定的例子：



  
    
    
    Document
  
  
    
    hello

总结

经常使用vue的同学应该会对Object.defineProperty和Proxy非常熟悉，vue的双向数据绑定就是用数据劫持(核心就是Object.defineProperty(vue2)或者Proxy(vue3))结合发布订阅的方式实现的，也是在面试的过程中经常会出现的题目。
占用值班时间，终于全部写完了，希望做一个学习笔记。

JavaScript观察者模式