[JS] Reflect的基本使用

Reflect的作用

一开始学习Reflect的时候其实觉得很迷惑，感觉通过Reflect操作Proxy对象或者Object对象总有一种多此一举的感觉。

为什么要使用Reflect操作对象，而不是直接在Proxy和Object上做操作呢？

原因之一是：Proxy和Object相关的API和操作方式在早期设计得不合理，不规范。但是Proxy和Object又是属于比较底层的东西，破坏性的改动会影响到非常多的现有代码。Reflect的提出就是为了解决这个问题，提供了一套现代的、规范的API来操作对象。

Reflect的优点可以由下面几点体现出来：

1. 在对象上定义属性失败时：Object.defineProperty(obj, name, desc)直接抛出异常，而Reflect.defineProperty(obj, name, desc)则是返回false。

2. 将部分命令式的Object操作规范化为函数行为：

   • name in obj变为：Reflect.has(obj, name)；
   • delete obj[name]变为：Reflect.deleteProperty(obj, name)；

3. 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