1.概述
2.静态方法
3.实例:使用Proxy实现观察者模式
1.概述
Reflect对象和Proxy对象一样,也是ES6为了操作对象而提供新的API,Reflect对象的设计目的有这样几个。
(1)将Object对象的一些明显属于语言内部的方法(比如Object.defineProperty),放到放到Reflect对象上。
(2)修改某些Object方法的返回结果,让其变得更加合理,比如,Object.defineProperty(obj, name, desc)在无法定义属性时,会抛出一个错误,而Reflect.defineProperty(obj, name, desc)则会返回false。
// 老写法
try {
Object.defineProperty(target, property, attributes);
// success
} catch (e) {
// failure
}
// 新写法
if (Reflect.defineProperty(target, property, attributes)) {
// success
} else {
// failure
}
(3)让Object操作都变成函数行为。某些Object操作方式是命令时的,比如name in Object和delete obj[name],而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为。
(4)Reflect对象的方法与Proxy对象的方法一一对应,不管你在Proxy上如何修改对象的默认行为,Reflect总可以获取到
2.Reflect静态方法
3.使用Proxy实现观察者模式
观察着模式指的是函数自动观察数据对象,一旦对象有变化,函数就会自动执行。请看一下例子
const person = observable({
name:'张三',
age:20
})//创建一个常量,常量的值是函数observable的返回值
function print() {
console.log(`${person.name},${person.age}`)
}//创建观察到数据发生变化时,执行的对应函数
observe(print)//输入函数
person.name = '李四' //修改属性的值
//输出
//李四,20
//执行了观察函数
上面代码中,数据对象person是观察目标,函数print是观察者,一旦数据发生变化,print就会自动执行。
下面是使用proxy写一个观察者模式最简单的实现,即实现observable
和observe
这两个函数。主要思路是observable
函数返回一个原始对象的Proxy代理,拦截赋值操作,触发充当观察者的各个函数
const queuedObservers = new Set(); //创建一个set数据结构,之后用来存储观察到数据发生改变的时候执行的函数
const observe = fn => queuedObservers.add(fn); //创建一个名为observe的函数,用于实现观察
const observable = obj => new Proxy(obj,{set})//创建一个名为observable的函数,用Proxy实现观察
function set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
queuedObservers.forEach(observer => observer());
return result;
}
//set函数,用于上面observable函数中配置对象的set执行,{ set }为ES6的新语法
上面代码中,先定义了一个Set集合,所有观察者函数都放进这个集合。然后,observable函数返回原始对象的代理,拦截赋值操作。拦截函数set之中,会自动执行所有观察者。