但事情是這樣的:這些工具可以解鎖對物件的全新控制級別,而且它們並不像您想像的那麼難使用。在這篇文章的結尾,您將確切地知道它們是如何工作的,為什麼它們很棒,以及如何將它們添加到您的工具箱中以用於實際的、真實的場景。
讓我們開始吧!
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
代理與反射如何成為完美的組合
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
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中文網其他相關文章!