這篇文章介紹了Reflect的優點及其靜態方法的使用，并通過Proxy實現了一個觀察者模式示例，展示了如何利用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