掌握 JavaScript 代理程式和 Reflect API（輕鬆無憂）

目錄

1. 簡介
2. JavaScript 代理有什麼用？
   • 現實生活中的範例：追蹤物件變化（簡單的方法）
3. 當你想使用代理時
   • 正確完成資料驗證
   • 建構響應式物件（是的，Vue 就是這麼做的）
   • 惰性物件：只創建你需要的
4. 好吧，但 Reflect 怎麼樣
5. 代理與反射如何成為完美的組合
   • 現實生活中的例子：用風格記錄
6. 為什麼你會喜歡代理與反思
7. 總結一下

介紹 ？

讓我們來談談 JavaScript 中兩個可能最被低估（和未充分利用）的功能：代理和反射。我明白了——你可能聽說過它們，甚至可能在谷歌上搜索過它們一兩次，但它們看起來有點額外，對吧？

但事情是這樣的：這些工具可以解鎖對物件的全新控制級別，而且它們並不像您想像的那麼難使用。在這篇文章的結尾，您將確切地知道它們是如何工作的，為什麼它們很棒，以及如何將它們添加到您的工具箱中以用於實際的、真實的場景。

讓我們開始吧！

JavaScript 代理有什麼用？

JavaScript 中的代理就像最終的中間人。它允許您攔截並自訂與物件互動的方式。您可以控制當有人嘗試存取、修改或刪除屬性時發生的情況。最好的部分是什麼？使用起來超簡單。

這樣想：你有一個對象- 比如說，一個用戶個人資料- 並且你想確保任何弄亂該對象的人不會做任何奇怪的事情（例如將他們的年齡設置為“胡言亂語” ）。有了代理，您就可以介入並控制。

這是基本語法：

let proxy = new Proxy(target, handler);

目標：原始物件（我們正在包裝的物件）。
處理程序：具有函數（稱為陷阱）的對象，可攔截讀取、寫入或刪除屬性等操作。

現實生活中的範例：追蹤物件變化（簡單的方法）

假設您正在建立一個協作編輯應用程序，並且您想知道每次有人更新文件的時間。使用代理就夠簡單了：

const documentModel = { title: "Draft", content: "Hello World" };

const handler = {
  set(target, prop, value) {
    console.log(`Property ${prop} is changing from ${target[prop]} to ${value}`);
    target[prop] = value;
    return true;
  }
};

const documentProxy = new Proxy(documentModel, handler);

documentProxy.title = "Final Draft"; // Logs: Property title is changing from Draft to Final Draft

每次文件更改時，您都會收到一個漂亮的小日誌，準確顯示發生了什麼。這裡沒有什麼驚喜。

當你想使用代理時

那麼，什麼時候該真正使用代理呢？很好的問題。以下是一些它真正閃耀的場景：

正確完成資料驗證

您可以使用代理來強制執行資料驗證規則。不再有無效資料潛入您的應用程式並在以後引起麻煩。

const person = { name: "", age: 0 };

const handler = {
  set(target, prop, value) {
    if (prop === "age" && typeof value !== "number") {
      throw new TypeError("Age must be a number");
    }
    target[prop] = value;
    return true;
  }
};

const personProxy = new Proxy(person, handler);
personProxy.age = 30; // All good
personProxy.age = "thirty"; // Throws an error

現在您已經有了一些可以擴展的很好的驗證，並且您不必編寫大量的樣板程式碼。不錯！

建構響應式物件（是的，Vue 就是這樣做的）

如果您曾經使用過 Vue，那麼您已經見過代理的實際應用。 Vue 使用代理程式使資料具有響應性，當資料變更時自動更新 UI。

您可以使用代理來觀察物件的變化並即時做出反應 - 非常適合建立您自己的反應式系統或儀表板。

惰性物件：只創造你需要的東西

您可以使用代理來推遲昂貴物件的創建，直到您真正需要它們為止。這稱為延遲初始化。您無需預先加載所有數據，只需在需要時獲取所需的數據。

好的，但是反射呢？

Reflect API 就像 Proxy 最好的夥伴。 Proxy 可讓您攔截操作，而 Reflect 則為您提供以更標準化的方式處理這些操作的工具。它可以讓您更乾淨、更可預測地處理物件操作（例如設定或取得屬性）。

以下是如何使用 Reflect 處理預設物件行為：

const user = { name: "Alice", age: 25 };

console.log(Reflect.get(user, "name")); // Alice
Reflect.set(user, "age", 30); // Sets age to 30

為什麼要費心使用 Reflect？它使程式碼更容易閱讀並且更加一致。當您不想執行任何自訂操作時，可以將其與代理一起使用來處理預設行為。

代理與反射如何成為完美的組合

讓我們把 Proxy 和 Reflect 放在一起。如果你想新增一些日誌記錄但仍然正常處理物件操作，Reflect 是你的朋友。這是一個範例，我們在存取或更改屬性時記錄日誌，但將實際工作委託給 Reflect：

const product = { name: "Laptop", price: 1000 };

const handler = {
  set(target, prop, value) {
    console.log(`Setting ${prop} to ${value}`);
    return Reflect.set(target, prop, value);
  },
  get(target, prop) {
    console.log(`Getting ${prop}`);
    return Reflect.get(target, prop);
  }
};

const productProxy = new Proxy(product, handler);
productProxy.price = 1200; // Logs: Setting price to 1200
console.log(productProxy.price); // Logs: Getting price, Output: 1200

最好的部分？我們可以自訂行為（日誌記錄），但 Reflect 處理設定和取得屬性的實際邏輯。這使事情變得簡單且可預測。

Pourquoi vous allez adorer Proxy et réfléchir

Voici pourquoi ces outils sont géniaux :

• Flexibilité : vous pouvez contrôler le comportement des objets, que vous ajoutiez une validation, une journalisation ou un chargement différé.
• Abstractions puissantes : avec les proxys, vous pouvez masquer une logique complexe et lui donner l'impression d'être magique. Combinez cela avec Reflect et vous obtenez le contrôle et la sécurité.
• Code plus propre : au lieu de pirater des cas extrêmes ou d'écrire des tonnes de conditions, les proxys vous permettent d'intercepter le comportement de manière propre et réutilisable.
• Meilleure DX (Developer Experience) : moins de passe-partout, moins de surprises, plus de contrôle. Qu'est-ce qu'il ne faut pas aimer ?

Envelopper le tout

Et voilà ! Les proxys et Reflect peuvent sembler un peu intimidants au début, mais une fois que vous les maîtrisez, ils peuvent améliorer considérablement votre code. Que vous souhaitiez valider des données, suivre les modifications d'objets ou simplement vouloir plus de contrôle sur le comportement des objets, ces outils sont là pour vous faciliter la vie.

Alors n'hésitez plus, essayez-les ! Vous pourriez bien vous retrouver à recourir à Proxy et Reflect dans votre prochain projet.

以上是掌握 JavaScript 代理程式和 Reflect API（輕鬆無憂）的詳細內容。更多資訊請關注PHP中文網其他相關文章！