元編程是一種強大的技術，使你能夠撰寫可以創建其他程式的程式，ES6借助代理和許多類似功能，使在JavaScript中利用元編程變得更加容易，ES6 Proxy（代理）有助于重新定義物件的基本操作，從而為各種可能性打開了大門，

本指南可以幫助您理解為什么ES6代理如此之好，尤其是對于元編程而言：

什么是ES6代理
如何以及何時實施代理
如何使用ES6代理執行訪問控制，資料系結和快取
ES6代理不是性能密集型任務的理想選擇

先決條件和結果

本教程主要針對有JavaScript經驗的開發人員，至少要熟悉ES6代理的概念，如果你已經對代理作為一種設計模式有了牢固的理解，那么這些知識應該可以轉化為現實，

閱讀本指南后，你應該能夠：

了解什么是ES6代理，如何實作以及何時使用它
使用ES6代理進行訪問控制，快取和資料系結

ES6代理剖析：目標（Target），處理程式（handler）和陷阱（trap）

從根本上來說，代理是指某件事或某人成為其他事物的替代品，所以不管是什么東西，都要經過替代品才能達到真正的交易，ES6代理的作業原理也是如此，

為了有效地實作和使用ES6代理，你必須了解三個關鍵術語：

Target——代理人所替代的真正的交易，目標是站在代理背后的東西，這可以是任何物件，
Handler——一個包含所有代理的陷阱邏輯的物件，
Trap——與作業系統中的陷阱類似，此背景關系中的陷阱是以某種方式提供對物件的訪問的方法（可理解為攔截行為），

綜上所述，下面是最簡單的實作，如果使用ES6代理，物件中不存在給定的屬性，則可以回傳不同的內容，

 const target = {
   someProp: 1
 }
 ?
 const handler = {
   get: function(target, key) {
     return key in target ? 
       target[key] : 
     'Doesn't exist!';
   }
 }
 ?
 const proxy = new Proxy(target, handler);
 console.log(proxy.someProp) // 1
 console.log(proxy.someOtherProp) // Doesn't exist!

ES6代理是一項強大的功能，可促進JavaScript中物件的虛擬化，

資料系結：同步多個物件

由于資料系結的復雜性，它通常很難實作，ES6代理實作雙向資料系結的應用可以在JavaScript的MVC庫中看到，在這些庫中，當DOM發生變化時，物件會被修改，

簡而言之，資料系結是一種將多個資料源系結在一起以使其同步的技術，

假設存在一個名為 username 的 ``，

 <input type="text" id="username" />

假設你要使此輸入的值與物件的屬性保持同步，

 const inputState = {
   id: 'username',
   value: ''
 }

當輸入的值發生變化時，通過監聽輸入的變化事件，然后更新 inputState 的值，修改 inputState 是相當容易的，然而，反過來，在 inputState 被修改時更新輸入，則相當困難，

ES6代理可以在這種情況下提供幫助，

 const input = document.querySelector('#username')
 const handler = {
   set: function(target, key, value) {
     if (target.id && key === 'username') {
       target[key] = value;
       document.querySelector(`#${target.id}`)
         .value = value;
       return true
     }
     return false
   }
 }
 ?
 const proxy = new Proxy(inputState, handler)
 proxy.value = 'John Doe'
 console.log(proxy.value, input.value) 
 // 雙方都將印有“ John Doe”

這樣，當 inputState 更改時，input 將反映已進行的更改，結合偵聽 change 事件，這將生成 input 和 inputState 的簡單雙向資料系結，

雖然這是一個有效的用例，但通常不建議這樣做，以后再說，

快取：提高代碼性能

快取是一個古老的概念，它允許非常復雜和大型的應用程式保持相對的性能，快取是存盤某些資料的程序，以便在請求時可以更快地提供資料，快取并不永久地存盤任何資料，快取失效是保證快取新鮮的程序，這是開發人員共同的苦惱，正如Phil Karlton所說："計算機科學中只有兩件難事：快取無效和給事物命名，"

ES6代理使快取更加容易，例如，如果你要檢查物件中是否存在某些東西，它將首先檢查快取并回傳資料，或者如果不存在則進行其他操作以獲取該資料，

假設你需要進行很多API呼叫才能獲取特定資訊并對其進行處理，

 const getScoreboad = (player) => {
   fetch('some-api-url')
     .then((scoreboard) => {
     // 用記分牌做點什么
   })
 }

這就意味著，每當需要一個球員的記分牌時，就必須進行一次新的呼叫，相反，你可以在第一次請求時快取記分牌，隨后的請求可以從快取中獲取，

 const cache = { 
   'John': ['55', '99']
 }
 const handler = { 
   get: function(target, player) {
     if(target[player] {
        return target[player]
   } else {
     fetch('some-api-url')
       .then(scoreboard => {
         target[player] = scoreboard
         return scoreboard
       })
     }
   }
 }
 const proxy = new Proxy(cache, handler)
 // 訪問快取并使用記分牌做一些事情

這樣，僅當快取中不包含玩家的記分牌時，才會進行API呼叫，

訪問控制：控制進出物件的內容

最簡單的用例是訪問控制，ES6代理的大部分內容都屬于訪問控制，

讓我們探索使用E6代理的訪問控制的一些實際應用，

1. 驗證

ES6代理最直觀的用例之一是驗證物件內部的內容，以確保物件中的資料盡可能準確，例如，如果你想強制執行產品描述的最大字符數，可以這樣做，

 const productDescs = {}
 const handler = {
   set: function(target, key, value) {
     if(value.length > 150) {
       value = value.substring(0, 150)
     }
     target[key] = value
   }
 }
 const proxy = new Proxy(productDescs, handler)

現在，即使你添加的描述超過150個字符，也會被刪減并添加，

2. 提供物件的只讀視圖

有時候你可能要確保不以任何方式修改物件，并且只能將其用于讀取目的， JavaScript提供了 Object.freeze() 來執行此操作，但是使用代理時，該行為更可自定義，

 const importantData =https://www.cnblogs.com/coderhf/p/ {
   name: 'John Doe',
   age: 42
 }
 ?
 const handler = {
   set: 'Read-Only',
   defineProperty: 'Read-Only',
   deleteProperty: 'Read-Only',
   preventExtensions: 'Read-Only',
   setPrototypeOf: 'Read-Only'
 }
 ?
 const proxy = new Proxy(importantData, handler)

現在，當你嘗試以任何方式更改物件時，你只會收到一個字串，表示只讀，否則，你可能會引發錯誤以指示該物件是只讀的，

3. 私有屬性

JavaScript本身并沒有私有屬性，除了閉包，當 Symbol 資料型別被引入時，它被用來模仿私有屬性，但隨著Object.getOwnPropertySymbols 方法的引入，它被拋棄了，ES6代理并不是一個完美的解決方案，但在緊要關頭它們可以完成任務，

一種常見的約定是通過在名稱前加上下劃線來標識私有屬性，這個約定允許你使用ES6代理，

 const object = {
   _privateProp: 42
 }
 ?
 const handler = {
   has: function(target, key) {
     return !(key.startsWith('_') && key in target)
   },
   get: function(target, key, receiver) {
     return key in receiver ? target[key] : undefined
   }
 }
 ?
 const proxy = new Proxy(object, handler)
 proxy._privateProp // undefined

添加 ownKeys 和 deleteProperty 會讓這個實作更接近于真正的私有屬性，然后，你仍然可以在開發者控制臺中查看代理物件，如果你的用例與上面的實作一致，它仍然適用，

為何以及何時使用代理

ES6代理并不是性能密集型任務的理想選擇，這就是為什么進行必要的測驗是至關重要的，代理可以在任何預期物件的地方使用，代理只需幾行代碼就能提供復雜的功能，這使它成為元編程的理想功能，

代理通常與另一個稱為Reflect的元編程功能一起使用，

總結

對了，小編為大家準備了一套2020最新的web前端資料，需要點擊下方鏈接獲取方式

學習前端，你掌握這些，二線也能輕松拿8K以上

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/47782.html

標籤：JavaScript

上一篇：2019前端面試系列——JS面試題

下一篇：JavaScript圖形實體：Koch曲線

JavaScript ES6代理的實際用例，快速教你用好ES6代理