JavaScript 支援
setters
和
getters
已經很長時間了。他們用帶有 set 和 get 關鍵字的簡單語法來攔截物件的屬性訪問和值的修改操作。
但是,setter/getter 有多個缺點:
它們僅限 get 和 get 操作(顯然)。
它們不能與相同鍵(即“常規”屬性)的
資料入口
一起使用。
它們不是動態的,必須在物件宣告期間用靜態的 方法或透過使用計算值(僅適用於新的瀏覽器)顯式地應用於每個屬性。
因此,setter 和 getter 不太適合觀察整個物件或執行非常簡單的操作。因此,
ECMAScript 6
(ES6)引入了
代理物件(Proxy object)
。
代理(Proxy)
代理是內建的 JS 物件,可用於攔截和更改與物件相關的不同操作的行為。
很快我們就可以看到 Proxy 與 setter 和 getters 之間的區別。它們不僅在語法上有所不同(Proxy 更為冗長),而且在與原始物件的互動方面也有所不同。Proxy會建立一個
新物件
供你與之互動,而不是與原始物件進行互動,原始物件在使用 setter/getter 時會直接修改。
在使用 Proxy 的情況下,原始物件(也稱為 )用作一種儲存。你對其執行的任何操作都會直接影響代理,但不會觸發其任何
trap
。
代理的 trap 是執行特定操作時呼叫的簡單方法。它們都是在單個
handler
物件上定義的,然後傳遞給 Proxy 建構函式。除此之外,它們不僅限於 set() 和 get(),還包括一些有趣的操作,你可以在 MDN 文件中找到。
可撤銷代理
如果出於某種原因,你以後想取消或
撤消
代理,則應該用靜態的 方法建立它。
該方法不是直接返回 Proxy 物件,而是返回一個物件,該物件包含位於 屬性下的實際 Proxy 和一個附加的 方法。
呼叫時,此方法會使 Proxy 無效,使以後的任何呼叫均以 結尾。之後該代理將被自動“垃圾收集”,從而釋放記憶體空間。
用例
與 setter/getter 相比,Proxy 可以讓你做更多的事情。它們更快(聲明後)並且更加靈活,使其成為狀態管理等用例的理想解決方案。
Proxy 帶來了很多可定製性,使開發人員可以控制 JS 的某些
元功能(meta-functionalities)
。所以它們並不是向後相容的,並且沒有任何完全相容的 polyfill 的選項存在。話雖如此,根據 Can I use。。。 的資料,總體的支援看上去不錯,覆蓋率約為
93%
(不支援 IE 和 Safari
強力推薦前端面試刷題神器