詳解ES6中的代理模式——Proxy
什么是代理模式
代理模式(英語:Proxy Pattern)是程序設(shè)計中的一種設(shè)計模式。
所謂的代理者是指一個類別可以作為其它東西的接口。代理者可以作任何東西的接口:網(wǎng)絡(luò)連接、內(nèi)存中的大對象、文件或其它昂貴或無法復(fù)制的資源。
著名的代理模式例子為引用計數(shù)(英語:reference counting)指針對象。
當(dāng)一個復(fù)雜對象的多份副本須存在時,代理模式可以結(jié)合享元模式以減少內(nèi)存用量。典型作法是創(chuàng)建一個復(fù)雜對象及多個代理者,每個代理者會引用到原本的復(fù)雜對象。而作用在代理者的運(yùn)算會轉(zhuǎn)送到原本對象。一旦所有的代理者都不存在時,復(fù)雜對象會被移除。
上面是維基百科中對代理模式的一個整體的定義.而在JavaScript中代理模式的具體表現(xiàn)形式就是ES6中的新增對象---Proxy
什么是Proxy對象
在MDN上對于 Proxy 的解釋是:
Proxy 對象用于定義基本操作的自定義行為(如屬性查找,賦值,枚舉,函數(shù)調(diào)用等)。
簡單來說: Proxy 對象就是可以讓你去對JavaScript中的一切合法對象的基本操作進(jìn)行自定義.然后用你自定義的操作去覆蓋其對象的基本操作.也就是當(dāng)一個對象去執(zhí)行一個基本操作時,其執(zhí)行的過程和結(jié)果是你自定義的,而不是對象的.
:sweat:好吧,用文字表達(dá)可能太復(fù)雜了.我們還是直接上代碼吧.
首先Proxy的語法是:
let p = new Proxy(target, handler);
其中:
- target 是你要代理的對象.它可以是JavaScript中的任何合法對象.如: (數(shù)組, 對象, 函數(shù)等等)
- handler 是你要自定義操作方法的一個集合.
- p 是一個被代理后的新對象,它擁有 target 的一切屬性和方法.只不過其行為和結(jié)果是在 handler 中自定義的.
然后讓我們來看這段代碼:
let obj = { a: 1, b: 2, } const p = new Proxy(obj, { get(target, key, value) { if (key === 'c') { return '我是自定義的一個結(jié)果'; } else { return target[key]; } }, set(target, key, value) { if (value === 4) { target[key] = '我是自定義的一個結(jié)果'; } else { target[key] = value; } } }) console.log(obj.a) // 1 console.log(obj.c) // undefined console.log(p.a) // 1 console.log(p.c) // 我是自定義的一個結(jié)果 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); // 我是自定義的一個結(jié)果
從上面這段代碼中,我可以很清楚的看到 Proxy 對象的作用.即是之前所受的 用于定義基本操作的自定義行為 .同樣的 get 和 set 操作.沒有沒代理的對象所得的結(jié)果是其JavaScript本身的執(zhí)行機(jī)制運(yùn)行計算后所得到的.而被代理了的對象的結(jié)果則是我們自定義的.
Proxy所能代理的范圍--handler
在上面代碼中,我們看到了構(gòu)造一個代理對象時所傳的第二個參數(shù) handler ,這個 handler 對象是由 get 和 set 兩個函數(shù)方法組成的.這兩個方法會在一個對象被 get 和 set 時被調(diào)用執(zhí)行,以代替原生對象上的操作.那么為什么在 handler ,定義 get 和 set 這兩個函數(shù)名之后就代理對象上的 get 和 set 操作了呢?
實(shí)際上 handler 本身就是ES6所新設(shè)計的一個對象.它的作用就是用來 自定義代理對象的各種可代理操作 。它本身一共有13中方法,每種方法都可以代理一種操作.其13種方法如下:
handler.getPrototypeOf() // 在讀取代理對象的原型時觸發(fā)該操作,比如在執(zhí)行 Object.getPrototypeOf(proxy) 時。 handler.setPrototypeOf() // 在設(shè)置代理對象的原型時觸發(fā)該操作,比如在執(zhí)行 Object.setPrototypeOf(proxy, null) 時。 handler.isExtensible() // 在判斷一個代理對象是否是可擴(kuò)展時觸發(fā)該操作,比如在執(zhí)行 Object.isExtensible(proxy) 時。 handler.preventExtensions() // 在讓一個代理對象不可擴(kuò)展時觸發(fā)該操作,比如在執(zhí)行 Object.preventExtensions(proxy) 時。 handler.getOwnPropertyDescriptor() // 在獲取代理對象某個屬性的屬性描述時觸發(fā)該操作,比如在執(zhí)行 Object.getOwnPropertyDescriptor(proxy, "foo") 時。 handler.defineProperty() // 在定義代理對象某個屬性時的屬性描述時觸發(fā)該操作,比如在執(zhí)行 Object.defineProperty(proxy, "foo", {}) 時。 handler.has() // 在判斷代理對象是否擁有某個屬性時觸發(fā)該操作,比如在執(zhí)行 "foo" in proxy 時。 handler.get() // 在讀取代理對象的某個屬性時觸發(fā)該操作,比如在執(zhí)行 proxy.foo 時。 handler.set() // 在給代理對象的某個屬性賦值時觸發(fā)該操作,比如在執(zhí)行 proxy.foo = 1 時。 handler.deleteProperty() // 在刪除代理對象的某個屬性時觸發(fā)該操作,比如在執(zhí)行 delete proxy.foo 時。 handler.ownKeys() // 在獲取代理對象的所有屬性鍵時觸發(fā)該操作,比如在執(zhí)行 Object.getOwnPropertyNames(proxy) 時。 handler.apply() // 在調(diào)用一個目標(biāo)對象為函數(shù)的代理對象時觸發(fā)該操作,比如在執(zhí)行 proxy() 時。 handler.construct() // 在給一個目標(biāo)對象為構(gòu)造函數(shù)的代理對象構(gòu)造實(shí)例時觸發(fā)該操作,比如在執(zhí)行new proxy() 時。
Proxy的作用
對于代理模式 Proxy 的作用主要體現(xiàn)在三個方面:
1、 攔截和監(jiān)視外部對對象的訪問
2、 降低函數(shù)或類的復(fù)雜度
2、 在復(fù)雜操作前對操作進(jìn)行校驗(yàn)或?qū)λ栀Y源進(jìn)行管理
而對于這三個使用方面的具體表現(xiàn)大家可以參考這篇文章-- 實(shí)例解析ES6 Proxy使用場景
Proxy的兼容性
參考資料:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
體驗(yàn)js中splice()的強(qiáng)大(插入、刪除或替換數(shù)組的元素)
javascript splice()算是最強(qiáng)大的了,它可以用于插入、刪除或替換數(shù)組的元素。下面來一一介紹,感興趣的朋友2013-01-01countUp.js實(shí)現(xiàn)數(shù)字滾動效果
這篇文章主要為大家詳細(xì)介紹了countUp.js實(shí)現(xiàn)數(shù)字滾動效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-10-10js控住DOM實(shí)現(xiàn)發(fā)布微博效果
這篇文章主要為大家詳細(xì)介紹了js控住DOM實(shí)現(xiàn)發(fā)布微博效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-08-08JavaScript實(shí)現(xiàn)將Excel文件渲染在頁面上
這篇文章主要為大家詳細(xì)介紹了如何使用Html和JavaScript實(shí)現(xiàn)將Excel文件渲染在頁面上,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考下2024-12-12JS中ESModule和commonjs介紹及使用區(qū)別
這篇文章主要介紹了JS中ESModule和commonjs介紹及使用區(qū)別,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價值,需要的朋友可以參考一下2022-07-07