什么是观察者模式
观察者模式是软件设计模式的一种。在此种模式中，一个目标对象管理所有相依于它的观察者对象，并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法来实现。此种模式通常被用来实时事件处理系统。简单的说，就是在数据发生改变时，对应的处理函数自动执行。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的构造函数
<T extends object>(target: T, handler: ProxyHandler<T>): 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实现双向绑定的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" id="inputs" value="hello"/>
<p id="show">hello</p>
<script>
let oInput = document.querySelector('#inputs')
let oShow = document.querySelector('#show')
let obj = {}
let handler = {
get: (obj, key, val) =>{
console.log(`get ${key}`)
return Reflect.get(obj, key)
},
set: (obj, key, val) => {
console.log(`set ${key}`)
if(key === 'text') {
oShow.innerHTML = val
}
return Reflect.set(obj, key, val)
}
}
let proxy = new Proxy(obj, handler)
oInput.onkeyup = (e) => {
proxy.text = e.target.value
console.log(proxy.text)
}
</script>
</body>
</html>
总结
- 经常使用vue的同学应该会对Object.defineProperty和Proxy非常熟悉，vue的双向数据绑定就是用数据劫持(核心就是Object.defineProperty(vue2)或者Proxy(vue3))结合发布订阅的方式实现的，也是在面试的过程中经常会出现的题目。
- 占用值班时间，终于全部写完了，希望做一个学习笔记。
