JS Proxy(代理)簡單講解

前言

Proxy 也就是代理，可以幫助我們完成很多事情，例如對數據的處理，對構造函數的處理，對數據的驗證，說白了，就是在我們訪問對象前添加了一層攔截，可以過濾很多操作，而這些過濾，由你來定義。
想了解更多請參考 官方文檔

語法

 let p = new Proxy(target, handler);　　//創建一個Proxy實例 

參數

1. target：需要使用 Proxy 包裝的目標對象（可以是任何類型的對象，包括原生數組，函數，甚至另一個代理）。
2. handler：一個對象，其屬性是當執行一個操作時定義代理的行為的函數(可以理解為某種觸發器)。具體的  handler 相關函數請查閱官網

下面是使用示例，一個簡單的代理:

let test = { name: "小紅" }; let proxyObj = new Proxy(test, { get(target, key) { console.log('獲取了getter屬性'); return target[key]; } }); console.log(proxyObj.name); // 小紅
console.log(proxyObj==test);    // false (注意Proxy實例是另一個對象)

控制台顯示結果：

　　

上方的案例，我們首先創建了一個test對象，里面有name屬性，然后我們使用 Proxy 將其包裝起來，再返回給 proxyObj，此時的 proxyObj 已經成為了一個 Proxy 實例，我們對 proxyObj 的操作，都會被 Proxy 攔截。
Proxy 有兩個參數，第一個是target,也就是我們傳入的 test 對象,另一個則是 handler，也就是我們傳入的第二個參數，一個匿名對象。在 handler 中定義了一個名叫 get 的函數，當我們獲取 proxyObj 的屬性時，則會觸發此函數。
咱們再來試試使用 set 來攔截一些操作，並將 get 返回值更改

let xiaohong = { name: "小紅", age: 15 }; let proxyObj = new Proxy(xiaohong, { get(target, key) { let result = target[key]; //如果是獲取 年齡 屬性，則添加 歲字
      if (key === "age") result += "歲"; return result; }, set(target, key, value) { if (key === "age" && typeof value !== "number") { throw Error("age字段必須為Number類型"); } return Reflect.set(target, key, value); } }); console.log(`我叫${proxyObj.name} 我今年${proxyObj.age}了`);

proxyObj.age = "aa";

控制台顯示結果：

　　

上方案例中定義了 proxyObj 對象，其中有 age 和 name 兩個字段,我們在  Proxy 中的 get 攔截函數中添加了一個判斷，如果是取 age 屬性的值，則在后面添加 歲。在 set 攔截函數中判斷了如果是更改 age 屬性時，類型不是 Number則拋出錯誤。最后,正確的輸出了我們想要的結果!
關於 return Reflect.set(target, key, value); 這句代碼，可以用其他方式替換，例如 :

let xiaohong = { name: "小紅", age: 15 }; let proxyObj = new Proxy(xiaohong, { get(target, key) { let result = target[key]; //如果是獲取 年齡 屬性，則添加 歲字
      if (key === "age") result += "歲"; return result; }, set(target, key, value) { if (key === "age" && typeof value !== "number") { throw Error("age字段必須為Number類型"); } // return Reflect.set(target, key, value);
      target[key] = value; } }); proxyObj.age = 12; console.log(`我叫${proxyObj.name} 我今年${proxyObj.age}了`);

控制台顯示結果：

　　

但是，既然JS為我們提供了 Reflect ，那我們肯定是使用它啦，畢竟它和Proxy本來就是一起玩的,Proxy有的函數它都有！具體的參考 官方鏈接
這只是最基礎的應用，其他的大家可以自行摸索，都是一樣的用法！

 

簡單示例：

let xiaohong = { name: "小紅", age: 15 }; let proxyObj = new Proxy(xiaohong, {}); console.log(proxyObj); console.log(proxyObj.name); console.log(proxyObj.age);

控制台顯示結果：

　　

 

 

 

其他高深一點的用法參考：https://www.jianshu.com/p/9d8f8782c02d