本篇文章給大家?guī)砹岁P于JavaScript中Proxy與Reflect的相關知識,希望對大家有幫助。
ECMAScript 在 ES6 規(guī)范中加入了 Proxy 與 Reflect 兩個新特性,這兩個新特性增強了 JavaScript 中對象訪問的可控性,使得 JS 模塊、類的封裝能夠更加嚴密與簡單,也讓操作對象時的報錯變得更加可控。
Proxy
Proxy,正如其名,代理。這個接口可以給指定的對象創(chuàng)建一個代理對象,對代理對象的任何操作,如:訪問屬性、對屬性賦值、函數調用,都會被攔截,然后交由我們定義的函數來處理相應的操作,
JavaScript 的特性讓對象有很大的操作空間,同時 JavaScript 也提供了很多方法讓我們去改造對象,可以隨意添加屬性、隨意刪除屬性、隨意更改對象的原型……但是此前 Object 類提供的 API 有許多缺點:
- 如果要用 Object.defineProperty 定義某個名稱集合內的全部屬性,只能通過枚舉的方式為全部屬性設置 getter 和 setter,而且由于只能每個屬性創(chuàng)造一個函數,集合太大會造成性能問題。
- Object.defineProperty 定義后的屬性,如果仍想擁有正常的存取功能,只能將數據存放在對象的另一個屬性名上或者需要另一個對象來存放數據,對于只想監(jiān)聽屬性的場合尤為不便。
- Object.defineProperty 無法修改類中不可重新定義的屬性,例如數組的 length 屬性。
- 對于那些尚不存在且名稱不好預測的屬性,Object.defineProperty 愛莫能助。
- 無法修改或阻止某些行為,如:枚舉屬性名、修改對象原型。
Proxy 接口的出現很好地解決了這些問題:
- Proxy 接口將對對象的所有操作歸類到數個類別中,通過 Proxy 提供的陷阱攔截特定的操作,再在我們定義的處理函數中進行邏輯判斷就可以實現復雜的功能,并且還能控制比以前