但事情是這樣的:這些工具可以解鎖對物件的全新控制級別,而且它們並不像您想像的那麼難使用。在這篇文章的結尾,您將確切地知道它們是如何工作的,為什麼它們很棒,以及如何將它們添加到您的工具箱中以用於實際的、真實的場景。
讓我們開始吧!
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 就是這樣做的)
您可以使用代理來觀察物件的變化並即時做出反應 - 非常適合建立您自己的反應式系統或儀表板。
惰性物件:只創造你需要的東西
好的,但是反射呢?
以下是如何使用 Reflect 處理預設物件行為:
const user = { name: "Alice", age: 25 }; console.log(Reflect.get(user, "name")); // Alice Reflect.set(user, "age", 30); // Sets age to 30為什麼要費心使用 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 處理設定和取得屬性的實際邏輯。這使事情變得簡單且可預測。
Voici pourquoi ces outils sont géniaux :
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中文網其他相關文章!