[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