溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
代理模式（英語：Proxy Pattern）是程序設計中的一種設計模式。
所謂的代理者是指一個類別可以作為其它東西的接口。代理者可以作任何東西的接口：網絡連接、內存中的大對象、文件或其它昂貴或無法復制的資源。
著名的代理模式例子為引用計數（英語：reference counting）指針對象。
當一個復雜對象的多份副本須存在時，代理模式可以結合享元模式以減少內存用量。典型作法是創建一個復雜對象及多個代理者，每個代理者會引用到原本的復雜對象。而作用在代理者的運算會轉送到原本對象。一旦所有的代理者都不存在時，復雜對象會被移除。
上面是維基百科中對代理模式的一個整體的定義.而在JavaScript中代理模式的具體表現形式就是ES6中的新增對象---Proxy
在MDN上對于 Proxy 的解釋是:
Proxy 對象用于定義基本操作的自定義行為（如屬性查找，賦值，枚舉，函數調用等）。
簡單來說: Proxy 對象就是可以讓你去對JavaScript中的一切合法對象的基本操作進行自定義.然后用你自定義的操作去覆蓋其對象的基本操作.也就是當一個對象去執行一個基本操作時,其執行的過程和結果是你自定義的,而不是對象的.
:sweat:好吧,用文字表達可能太復雜了.我們還是直接上代碼吧.
首先Proxy的語法是:
let p = new Proxy(target, handler);
其中:
然后讓我們來看這段代碼:
let obj = {
a: 1,
b: 2,
}
const p = new Proxy(obj, {
get(target, key, value) {
if (key === 'c') {
return '我是自定義的一個結果';
} else {
return target[key];
}
},
set(target, key, value) {
if (value === 4) {
target[key] = '我是自定義的一個結果';
} else {
target[key] = value;
}
}
})
console.log(obj.a) // 1
console.log(obj.c) // undefined
console.log(p.a) // 1
console.log(p.c) // 我是自定義的一個結果
obj.name = '李白';
console.log(obj.name); // 李白
obj.age = 4;
console.log(obj.age); // 4
p.name = '李白';
console.log(p.name); // 李白
p.age = 4;
console.log(p.age); // 我是自定義的一個結果
從上面這段代碼中,我可以很清楚的看到 Proxy 對象的作用.即是之前所受的 用于定義基本操作的自定義行為 .同樣的 get 和 set 操作.沒有沒代理的對象所得的結果是其JavaScript本身的執行機制運行計算后所得到的.而被代理了的對象的結果則是我們自定義的.
在上面代碼中,我們看到了構造一個代理對象時所傳的第二個參數 handler ,這個 handler 對象是由 get 和 set 兩個函數方法組成的.這兩個方法會在一個對象被 get 和 set 時被調用執行,以代替原生對象上的操作.那么為什么在 handler ,定義 get 和 set 這兩個函數名之后就代理對象上的 get 和 set 操作了呢?
實際上 handler 本身就是ES6所新設計的一個對象.它的作用就是用來 自定義代理對象的各種可代理操作 。它本身一共有13中方法,每種方法都可以代理一種操作.其13種方法如下:
handler.getPrototypeOf()
// 在讀取代理對象的原型時觸發該操作，比如在執行 Object.getPrototypeOf(proxy) 時。
handler.setPrototypeOf()
// 在設置代理對象的原型時觸發該操作，比如在執行 Object.setPrototypeOf(proxy, null) 時。
handler.isExtensible()
// 在判斷一個代理對象是否是可擴展時觸發該操作，比如在執行 Object.isExtensible(proxy) 時。
handler.preventExtensions()
// 在讓一個代理對象不可擴展時觸發該操作，比如在執行 Object.preventExtensions(proxy) 時。
handler.getOwnPropertyDescriptor()
// 在獲取代理對象某個屬性的屬性描述時觸發該操作，比如在執行 Object.getOwnPropertyDescriptor(proxy, "foo") 時。
handler.defineProperty()
// 在定義代理對象某個屬性時的屬性描述時觸發該操作，比如在執行 Object.defineProperty(proxy, "foo", {}) 時。
handler.has()
// 在判斷代理對象是否擁有某個屬性時觸發該操作，比如在執行 "foo" in proxy 時。
handler.get()
// 在讀取代理對象的某個屬性時觸發該操作，比如在執行 proxy.foo 時。
handler.set()
// 在給代理對象的某個屬性賦值時觸發該操作，比如在執行 proxy.foo = 1 時。
handler.deleteProperty()
// 在刪除代理對象的某個屬性時觸發該操作，比如在執行 delete proxy.foo 時。
handler.ownKeys()
// 在獲取代理對象的所有屬性鍵時觸發該操作，比如在執行 Object.getOwnPropertyNames(proxy) 時。
handler.apply()
// 在調用一個目標對象為函數的代理對象時觸發該操作，比如在執行 proxy() 時。
handler.construct()
// 在給一個目標對象為構造函數的代理對象構造實例時觸發該操作，比如在執行new proxy() 時。
Proxy的作用
對于代理模式 Proxy 的作用主要體現在三個方面:
1、 攔截和監視外部對對象的訪問
2、 降低函數或類的復雜度
2、 在復雜操作前對操作進行校驗或對所需資源進行管理
而對于這三個使用方面的具體表現大家可以參考這篇文章-- 實例解析ES6 Proxy使用場景
參考資料:
MDN---Proxy
實例解析ES6 Proxy使用場景
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
