console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.观察者构造函数
    class Observer {
      constructor(name, fn) {
        this.name = name
        this.fn = fn || function () { }
      }
    }
    // 创建观察者（多个）
    const njzr = new Observer('年级主任', (state) => {
      console.log('因为: ' + state + ' , 你是哪个班的')
    })
    const bzr = new Observer('班主任', (state) => {
      console.log('因为: ' + state + ' , 把你爸找来')
    })
    const xz = new Observer('校长', (state) => {
      console.log('因为: ' + state + ' , 骂你的班主任')
    })

    // 2.被观察者的构造函数
    class Subject {
      constructor(state) {
        // 记录自己的状态
        this.state = state
        // 记录观察者：数组用来保存观察着我的人
        this.observsers = []
      }
      // 设置自己的状态
      setState(val) {
        this.state = val
        // 状态一经改变就需要把 我的所有观察者 的技能都触发
        this.observsers.forEach(item => {
          // 告诉他我改变成了什么状态
          item.fn(this.state)
        })
      }
      // 添加观察者
      addObserver(obs) {
        // 默认进行去重处理
        this.observsers = this.observsers.filter(item => item !== obs)
        this.observsers.push(obs)
      }
      // 删除观察者
      delObserver(obs) {
        this.observsers = this.observsers.filter(item => item !== obs)
      }
    }
    // 创造被观察者（多个）
    const xiaoming = new Subject('学习')
    xiaoming.addObserver(njzr)
    xiaoming.addObserver(bzr)
    xiaoming.addObserver(xz)

    xiaoming.setState("上课打游戏")

    const xiaohong = new Subject('学习')
    xiaohong.addObserver(bzr)
    xiaohong.addObserver(xz)

    console.log(xiaoming)
    console.log(xiaohong)
  </script>
</body>

</html>