[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变为：Reflect.deleteProperty(obj, name)；
[*]Reflect简化了一些操作：
// 老写法
Function.prototype.apply.call(Math.floor, undefined, ) // 1
// 新写法
Reflect.apply(Math.floor, undefined, ) // 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
来源:https://www.cnblogs.com/feixianxing/p/18299251/javascript-reflect-proxy-object-api-and-observe-pattern
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]