JS Proxy(代理)

前言

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

---

語法

let p = new Proxy(target, handler);

參數

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

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

  let test = {
    name: "小紅"
  };
  test = new Proxy(test, {
    get(target, key) {
      console.log('獲取了getter屬性');
      return target[key];
    }
  });
  console.log(test.name);

 

 

 

 

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

 

  let xiaohong = {
    name: "小紅",
    age: 15
  };
  xiaohong = 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(`我叫${xiaohong.name}  我今年${xiaohong.age}了`);
  xiaohong.age = "aa";

 

 

 

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

  let xiaohong = {
    name: "小紅",
    age: 15
  };
  xiaohong = 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類型");
      }
      target[key] = value;
      // return Reflect.set(target, key, value);
    }
  });
  console.log(`我叫${xiaohong.name}  我今年${xiaohong.age}了`);
  xiaohong.age = 12;

 

 

 

 

此時會拋出一個錯誤，因為 set函數必須返回一個 boolean值，只有返回值為 true時才表示修改成功，我們沒有手動 return，函數會自動返回 undefined, undefined != true,所以報錯是正常的，只需要手動在最后添加一句 return true即可！
但是，既然JS為我們提供了 Reflect ，那我們肯定是使用它啦，畢竟它和 Proxy本來就是一起玩的, Proxy有的函數它都有！具體的參考 官方鏈接
這只是最基礎的應用，其他的大家可以自行摸索，都是一樣的用法！
打字不易，點贊的你最靚了...