JavaScript >> Javascript 文檔 >  >> JavaScript

使用 javascript 代理

我最近一直在研究 Javascript 中的代理。我對它能做什麼感到驚訝。 代理 允許您掛鉤語言結構的基​​本操作(如對象、數組、函數..)

這是 javascript 代理的簡單用例列表

凍結對象

我們可以通過幾行代碼很容易地防止對象的突變,本質上是凍結對象

 const hero = {
   name: 'Saitama',
   age: 25,
   class: 'B',
   race: 'Human',
   heroName: 'Caped Baldy',
 };

 const Freeze = obj =>
   new Proxy(obj, {
     set: function(target, key, value) {
       throw Error("You can't change values this object has been frozen");
     },
   });

 const saitama = Freeze(hero);
 saitama.name = 'Garuro';   // This will throw error

還可以凍結數組、Map、WeakMap、Set...

跟踪對象的變化

代理可以用來跟踪對象的變化,本質上是維護歷史。

 const createHistory = obj => {
   let history = [JSON.parse(JSON.stringify(obj))];
   const proxiedObject = new Proxy(obj, {
     set: function(target, key, value) {
       history.push({ ...target, [key]: value });
       Reflect.set(target, key, value);
     },
   });
   return [history, proxiedObject];
 };

 const [history, proxiedObject] = createHistory(hero);
 proxiedObject.name = 'Genos';
 proxiedObject.class = 'C';

 console.log(history);

歷史對象將包含對該對象所做更改的快照

 [
   {
     name: 'Saitama',
     age: 25,
     class: 'B',
     race: 'Human',
     heroName: 'Caped Baldy'
   },
   {
     name: 'Genos',
     age: 25,
     class: 'B',
     race: 'Human',
     heroName: 'Caped Baldy'
   },
   {
     name: 'Genos',
     age: 25,
     class: 'C',
     race: 'Human',
     heroName: 'Caped Baldy'
   }
 ]

同樣,您還可以跟踪使用應用觸發器調用函數的次數。

不區分大小寫的密鑰訪問

 const caseInsensitive = obj =>
   new Proxy(obj, {
     get: function(target, key) {
       // I am assuming keys are lowercase by default for simplicity
       return Reflect.get(target, key.toLowerCase());
     },
   });

 const proxiedObject = caseInsensitive(hero);
 console.log(proxiedObject.name); // saitama
 console.log(proxiedObject.NAME); // saitama

處理不存在的屬性

您可以通過以下代碼段輕鬆處理未定義的屬性

 const FetchValue = obj =>
   new Proxy(obj, {
     get: function(target, key) {
       if (target.hasOwnProperty(key)) {
         return [Reflect.get(target, key), true];
       }
       return [null, false];
     },
   });


 const proxiedObject = FetchValue(hero);

 const [name, nameExist] = proxiedObject.name;
 const [city, cityExist] = proxiedObject.city;

 if (nameExist) {
   console.log(name);
 }

 if (cityExist) {
   console.log(city); // this is not executed since property city does not exist
 }

您可以使用代理做的比這裡列出的要多得多。你可以在這裡查看更棒的用法 https://github.com/mikaelbr/awesome-es2015-proxy


下一篇
Tutorial JavaScript 教程
  1. 如何確定一個 React 組件應該包含哪些狀態?

  2. Javascript:為玩家分配隨機角色的百分比

  3. 最佳現代 JavaScript  — 函數名稱和箭頭函數

  4. cefsharp 無法通過 javascript 播放音頻

  5. 我是如何構建我的第一個自定義 ESLint 規則的

  6. 使用 createContext() 的複雜自定義 Hooks;

  7. 2020 年使用的 10 多個最佳 NodeJS CMS 平台

  1. 如何將數據綁定到角度甘特圖

  2. Reactjs 中的減量函數不起作用

  3. 我所知道的:JavaScript 中的作用域

  4. 在 5 分鐘內創建一個 React Router 應用程序

  5. React Hook:檢查是否溢出

  6. 為什麼 v-for 不會渲染任何 DOM? “屬性或方法“數據”未在實例上定義,但在渲染期間被引用。

  7. 編程交互式(可旋轉)3D 立方體

  1. 讓我們用 JavaScript 和 WebRTC 構建一個視頻聊天應用程序

  2. JavaScript 通過鍵減少對像數組 |示例代碼

  3. React 面試問題的回答和解釋 #1

  4. 通過數據的異步內聯腳本:URI