代理模式詳解與範例

意圖與它解決的問題

意圖：為另一個物件提供替身或佔位物件，以控制對它的存取。代理是《設計模式》（Gang of Four，簡稱 GoF）一書中的結構型模式之一。

假設某個應用程式透過網路呼叫氣象服務。每次呼叫要花數百毫秒，而且要付費，同一個城市每分鐘常常被查詢許多次。你無法更動這個服務類別，也不想在每個呼叫它的地方都加上快取程式碼。代理可以解決這個問題：它實作相同的介面、保存一份快取，只有在快取未命中時才呼叫真正的服務。呼叫端完全不必更動。

同樣的概念也能滿足其他需求：只在第一次使用時才建立昂貴的物件、在呼叫之前檢查權限、記錄每一次呼叫，或是隱藏真正的物件位在另一台機器上的事實。

結構與參與者

TypeScript 實作：快取代理

WeatherService 是主體。CachedWeatherService 是代理：它有相同的方法，只有在快取的值不存在或太舊時，才轉發給真正的服務。

interface WeatherService {
  getTemperature(city: string): Promise<number>;
}
class RemoteWeatherService implements WeatherService {
  calls = 0;
  async getTemperature(city: string): Promise<number> {
    this.calls++; // imagine a slow HTTP request here
    return city.length * 3;
  }
}
class CachedWeatherService implements WeatherService {
  private cache = new Map<string, { value: number; time: number }>();
  constructor(private real: WeatherService, private maxAgeMs = 60_000) {}
  async getTemperature(city: string): Promise<number> {
    const hit = this.cache.get(city);
    if (hit && Date.now() - hit.time < this.maxAgeMs) return hit.value;
    const value = await this.real.getTemperature(city);
    this.cache.set(city, { value, time: Date.now() });
    return value;
  }
}
async function main() {
  const real = new RemoteWeatherService();
  const weather: WeatherService = new CachedWeatherService(real);
  await weather.getTemperature("Paris");
  await weather.getTemperature("Paris");
  console.log(await weather.getTemperature("Hanoi"), "real calls:", real.calls);
  // 15 real calls: 2
}
main();

用戶端變數的型別是 WeatherService，所以你可以在同一個地方切換真正的服務和代理，例如在依賴注入的設定中。

用 JavaScript Proxy 實作虛擬代理與保護代理

JavaScript 有內建的 Proxy 物件（ES2015），它透過稱為 trap 的處理函式，攔截屬性讀取、寫入與函式呼叫這類操作。這是一種方便的方式，讓你不必為每個介面都寫一個類別，就能建立代理。

type Account = { owner: string; balance: number };
function readOnly<T extends object>(target: T): T {
  return new Proxy(target, {
    set(_obj, prop) {
      throw new Error("Cannot change " + String(prop) + ": read-only");
    },
  });
}
const account = readOnly<Account>({ owner: "Ana", balance: 100 });
console.log(account.balance); // 100
try {
  account.balance = 0;
} catch (e) {
  console.log((e as Error).message); // Cannot change balance: read-only
}

何時使用、何時不該用

• 當你想在不更動真正類別及其呼叫端的情況下，加入延遲載入、存取控制、快取、記錄或遠端存取時，就使用它。
• 當真正的物件不在你的掌控之內，例如函式庫的類別或網路用戶端時，就使用它。
• 當單純的函式包裝就夠用時，不要使用它。對於單一函式，像 memoize(fn) 這樣的高階函式，比一個類別更簡單。
• 不要把緩慢或可能失敗的遠端呼叫，藏在看起來像本地的代理後面。呼叫端仍然需要處理延遲與錯誤，所以要在介面上讓這點看得見（例如回傳 Promise）。
• 要留意物件的身分：代理與真正的主體是不同的物件，所以 proxy === real 為 false。

實際應用

• Vue 3 的響應式系統是建立在 JavaScript 的 Proxy 之上：讀取屬性時記錄依賴，寫入屬性時觸發更新。
• Java 提供 java.lang.reflect.Proxy，可以在執行時期建立動態代理類別；框架會用它在介面外加上交易、安全檢查或遠端呼叫。
• Hibernate 這類物件關聯對映器（ORM）會為相關的實體回傳延遲代理，並在第一次存取時，才從資料庫載入真正的資料。
• 遠端程序呼叫（RPC）函式庫會產生看起來像本地物件的用戶端存根（stub），但每一次呼叫都是透過網路送出。

相關模式