[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简化了一些操作：
  1. // 老写法
  2. Function.prototype.apply.call(Math.floor, undefined, [1.75]) // 1
  4. // 新写法
  5. 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实现观察者模式

1. // 创建一个集合来保存观察者函数
2. const observers = new Set();
4. // 函数：添加新的观察者函数到观察者集合中
5. function observe(fn){
6.   observers.add(fn);
7. }
9. // 函数：创建一个可观察的对象
10. function observable(target){
11.   // 返回一个代理来拦截对目标对象的修改
12.   return new Proxy(target, {
13.     set(target, name, value, receiver){
14.       // 设置目标对象上的属性
15.       const result = Reflect.set(target, name, value, receiver);
16.       // 通知所有观察者函数属性的变化
17.       notify();
18.       return result;
19.     }
20.   });
21. }
23. // 函数：通知所有观察者函数属性的变化
24. function notify(){
25.   // 调用观察者集合中的每一个观察者函数
26.   observers.forEach(fn => fn());
27. }
29. // =================================================================
30. // 测试部分
31. // 创建一个包含count属性的可观察对象
32. let state = observable({
33.   count: 1,
34. });
36. // 添加一个观察者函数，每次state的count属性更新时，都会在控制台输出日志
37. observe(() => {
38.   console.log('state update: ', state.count);
39. });
41. // 多次递增state的count属性
42. state.count++;
43. state.count++;
44. state.count++;

复制代码

输出结果：

1. state update:  2
2. state update:  3
3. state update:  4

复制代码

来源:https://www.cnblogs.com/feixianxing/p/18299251/javascript-reflect-proxy-object-api-and-observe-pattern
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！