观察者（Observer）模式是针对回调模式的另外一种扩展。它允许被观察者（Subject，第一个例子中的AClass实例）添加多个观察者。

因此，在被观察者中需要维护一个观察者列表（ObserverList），当数据发生变化时，需要通知所有的观察者。

举例：原型链方式

  1. let Subject = function() {
  2.     this.observers = [];
  3. }
  5. Subject.prototype.addObserver = function(obv) {
  6.     this.observers.push(obv);
  7. }
  9. Subject.prototype.removeObserver = function(obv) {
  10.     let index = -1;
  11.     for(let i = 0; i < this.observers.length; i++) {
  12.         if(this.observers[i] === obv) {
  13.             index = i;
  14.             break;
  15.         }
  16.     }
  17.     if(index > 0) this.observers.splice(index, 1);
  18. }
  20. Subject.prototype.notify = function(event) {
  21.     for(let obv of this.observers) {
  22.         obv.update(event)
  23.     }
  24. }
  26. let Observer = function() { }
  28. Observer.prototype.update = function(event) {
  29.     console.log(event)
  30. }

举例：面向对象方式

  1. class Subject {
  2.     constructor() {
  3.         this.observers = [];
  4.     }
  6.     addObserver(obv) {
  7.         this.observers.push(obv);
  8.     }
  10.     removeObserver(obv) {
  11.         let index = -1;
  12.         for(let i = 0; i < this.observers.length; i++) {
  13.             if(this.observers[i] === obv) {
  14.                 index = i;
  15.                 break;
  16.             }
  17.         }
  18.         if(index > 0) this.observers.splice(index, 1);
  19.     }
  21.     notify(event) {
  22.         for(let obv of this.observers) {
  23.             obv.update(event)
  24.         }
  25.     }
  26. }
  28. class Observer {
  29.     constructor() { }
  31.     update(event) {
  32.         console.log(event)
  33.     }
  34. }

在业务逻辑中，通过继承的方式去实现观察者的回调逻辑和被观察者的通知逻辑：

举例：原型链方式

  1. let AClass = function() {};
  2. AClass.prototype = new Subject();
  3. AClass.prototype.constructor = AClass;
  4. AClass.prototype.add = function(number) {
  5.     this.notify("added " + number);
  6. };
  8. let BClass = function() {};
  9. BClass.prototype = new Observer();
  10. BClass.prototype.constructor = BClass;
  12. // 这种方式进行原型链重载后无法调用父类属性同名函数
  13. let a = new AClass();
  14. let b = new BClass();
  15. a.addObserver(b);
  16. a.add(5);
  17. // added 5

举例：面向对象方式

  1. class AClass extends Subject {
  2.     constructor() {
  3.         super();
  4.     }
  6.     add(number) {
  7.         super.notify("added " + number);
  8.     }
  9. }
  11. class BClass extends Observer {
  12.     constructor() {
  13.         super();
  14.     }
  15. }
  17. class CClass extends Observer {
  18.     constructor() {
  19.         super();
  20.     }
  22.     update(event) {
  23.         super.update(event)
  24.         console.log("SubClass " + event)
  25.     }
  26. }
  28. let a = new AClass();
  29. let b = new BClass();
  30. let c = new CClass();
  32. a.addObserver(b);
  33. a.addObserver(c);
  35. a.add(5);
  36. // added 5 
  37. // added 5
  38. // SubClass added 5