[JS] Reflect的基本使用
Reflect的作用
一开始学习Reflect的时候其实觉得很迷惑，感觉通过Reflect操作Proxy对象或者Object对象总有一种多此一举的感觉。
为什么要使用Reflect操作对象，而不是直接在Proxy和Object上做操作呢？
原因之一是：Proxy和Object相关的API和操作方式在早期设计得不合理，不规范。但是Proxy和Object又是属于比较底层的东西，破坏性的改动会影响到非常多的现有代码。Reflect的提出就是为了解决这个问题，提供了一套现代的、规范的API来操作对象。
Reflect的优点可以由下面几点体现出来：
-
在对象上定义属性失败时：
Object.defineProperty(obj, name, desc)直接抛出异常，而Reflect.defineProperty(obj, name, desc)则是返回false。 -
将部分命令式的
Object操作规范化为函数行为：name in obj变为：Reflect.has(obj, name)；delete obj[name]变为：Reflect.deleteProperty(obj, name)；
-
Reflect简化了一些操作：
// 老写法 Function.prototype.apply.call(Math.floor, undefined, [1.75]) // 1 // 新写法 Reflect.apply(Math.floor, undefined, [1.75]) // 1
静态方法
-
调用函数：Reflect.apply(target, thisArg, args)
-
调用构造函数：Reflect.construct(target, args)
-
读属性：Reflect.get(target, name, receiver)
-
写属性：Reflect.set(target, name, value, receiver)
-
定义属性：Reflect.defineProperty(target, name, desc)
-
删除属性：Reflect.deleteProperty(target, name)
-
查询属性是否存在：Reflect.has(target, name)
-
对象所有属性：Reflect.ownKeys(target)
等于
Object.getOwnPropertyNames和Object.getOwnPropertySymbols。 -
对象是否可扩展：Reflect.isExtensible(target)
-
让一个对象不可扩展：Reflect.preventExtensions(target)
-
获取属性的描述对象：Reflect.getOwnPropertyDescriptor(target, name)
-
获取对象的原型对象：Reflect.getPrototypeOf(target)
-
设置对象的原型对象：Reflect.setPrototypeOf(target, prototype)
使用Proxy实现观察者模式
// 创建一个集合来保存观察者函数
const observers = new Set();
// 函数：添加新的观察者函数到观察者集合中
function observe(fn){
observers.add(fn);
}
// 函数：创建一个可观察的对象
function observable(target){
// 返回一个代理来拦截对目标对象的修改
return new Proxy(target, {
set(target, name, value, receiver){
// 设置目标对象上的属性
const result = Reflect.set(target, name, value, receiver);
// 通知所有观察者函数属性的变化
notify();
return result;
}
});
}
// 函数：通知所有观察者函数属性的变化
function notify(){
// 调用观察者集合中的每一个观察者函数
observers.forEach(fn => fn());
}
// =================================================================
// 测试部分
// 创建一个包含count属性的可观察对象
let state = observable({
count: 1,
});
// 添加一个观察者函数，每次state的count属性更新时，都会在控制台输出日志
observe(() => {
console.log('state update: ', state.count);
});
// 多次递增state的count属性
state.count++;
state.count++;
state.count++;
输出结果：
state update: 2
state update: 3
state update: 4