av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

聊聊你不知道的Proxy

本文轉載自微信公眾號「全棧修仙之路」，作者阿寶哥。轉載本文請聯(lián)系全棧修仙之路公眾號。  

阿寶哥將從 6 個方面入手，帶你一步一步揭開 Proxy 對象的神秘面紗。閱讀完本文，你將了解以下內(nèi)容：

  • 代理的作用;
  • Proxy 對象與 Reflect 對象的相關知識;
  • Proxy 對象的 6 個使用場景;
  • 使用 Proxy 對象時的一些注意事項;
  • Proxy 在開源項目中的應用。

一、聊一聊代理

在日常工作中，相信挺多小伙伴都用過 Web 調試代理工具，比如 Fiddler 或 Charles。通過使用 Web 調試代理工具，我們可以抓取 HTTP/HTTPS 協(xié)議請求，還可以手動修改請求參數(shù)和響應結果。不僅如此，在調試線上問題時，利用 Web 調試代理工具，你還可以把線上壓縮混淆過 的 JS 文件映射成本地 未壓縮混淆過 的 JS 文件。

在簡單介紹了 Web 調試代理工具的基本功能之后，我們來看一下使用 Web 調試代理工具的 HTTP 請求流程：

通過上圖可知，在引入 Web 調試代理工具之后，我們發(fā)起的 HTTP 請求都會通過 Web Proxy 進行轉發(fā)和處理。增加了 Web Proxy 代理層，讓我們能夠更好地控制 HTTP 請求的流程。對于單頁應用程序來說，當從服務器獲取數(shù)據(jù)之后，我們就會讀取相應的數(shù)據(jù)在頁面上顯示出來：

 

以上流程與瀏覽器直接從服務器獲取數(shù)據(jù)類似：

 

為了能夠靈活控制 HTTP 請求的流程，我們增加了的 Web Proxy 層。那么我們能否控制數(shù)據(jù)對象的讀取流程呢?答案是可以的，我們可以利用 Web API，比如 Object.defineProperty 或 Proxy API。在引入 Web API 之后，數(shù)據(jù)的訪問流程如下圖所示：

 

接下來，阿寶哥將重點介紹 Proxy API，它可是 Vue3 實現(xiàn)數(shù)據(jù)響應式幕后的 “功臣” 喲。對它感興趣的小伙伴，跟阿寶哥一起學起來吧。

二、Proxy 對象簡介

Proxy 對象用于創(chuàng)建一個對象的代理，從而實現(xiàn)基本操作的攔截和自定義(如屬性查找、賦值、枚舉、函數(shù)調用等)。Proxy 的構造函數(shù)語法為：

 
 
 
 
    
  
  
  
  
  1. const p = new Proxy(target, handler) 
    2.

相關的參數(shù)說明如下：

  • target：要使用 Proxy 包裝的目標對象(可以是任何類型的對象，包括原生數(shù)組，函數(shù)，甚至另一個代理)。
  • handler：一個通常以函數(shù)作為屬性的對象，各屬性中的函數(shù)分別定義了在執(zhí)行各種操作時代理 p 的行為。

在介紹 Proxy 對象的使用示例前，我們先來了解一下它的兼容性：

 

(圖片來源：https://caniuse.com/?search=Proxy)

由上圖可知，Proxy API 的兼容性并不是很好，所以大家在使用的時候要注意其兼容性問題。

2.1 Proxy 對象使用示例

了解完 Proxy 構造函數(shù)，我們來看一個簡單的例子：

 
 
 
 
    
  
  
  
  
  1. const man = { 
    2. 
  
  
  
  
  2.   name: "阿寶哥", 
    3. 
  
  
  
  
  3. }; 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. const proxy = new Proxy(man, { 
    6. 
  
  
  
  
  6.   get(target, property, receiver) { 
    7. 
  
  
  
  
  7.     console.log(`正在訪問${property}屬性`); 
    8. 
  
  
  
  
  8.     return target[property]; 
    9. 
  
  
  
  
  9.   }, 
    10. 
  
  
  
  
  10. }); 
    11. 
  
  
  
  
  11.  
    12. 
  
  
  
  
  12. console.log(proxy.name); 
    13. 
  
  
  
  
  13. console.log(proxy.age); 
    14.

在以上示例中，我們使用了 Proxy 構造函數(shù)為 man 對象，創(chuàng)建了一個代理對象。在創(chuàng)建代理對象時，我們定義了一個 get 捕獲器，用于捕獲屬性讀取的操作。 捕獲器的作用就是用于攔截用戶對目標對象的相關操作，在這些操作傳播到目標對象之前，會先調用對應的捕獲器函數(shù)，從而攔截并修改相應的行為。

在設置了 get 捕獲器之后，當成功運行以上的示例代碼，控制臺會輸出以下結果：

 
 
 
 
    
  
  
  
  
  1. 正在訪問name屬性 
    2. 
  
  
  
  
  2. 阿寶哥 
    3. 
  
  
  
  
  3. 正在訪問age屬性 
    4. 
  
  
  
  
  4. undefined 
    5.

通過觀察以上輸出結果，我們可以發(fā)現(xiàn) get 捕獲器 不僅可以攔截已知屬性的讀取操作，也可以攔截未知屬性的讀取操作。在創(chuàng)建 Proxy 對象時，除了定義 get 捕獲器 之外，我們還可以定義其他的捕獲器，比如 has、set、delete、apply 或 ownKeys 等。

2.2 handler 對象支持的捕獲器

handler 對象支持 13 種捕獲器，這里阿寶哥只列舉以下 5 種常用的捕獲器：

  • handler.get()：屬性讀取操作的捕獲器。
  • handler.set()：屬性設置操作的捕獲器。
  • handler.deleteProperty()：delete 操作符的捕獲器。
  • handler.ownKeys()：Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕獲器。
  • handler.has()：in 操作符的捕獲器。

需要注意的是，所有的捕獲器是可選的。如果沒有定義某個捕獲器，那么就會保留源對象的默認行為。 看完上面的捕獲器介紹，是不是覺得 Proxy 對象很強大。

三、Reflect 對象簡介

Reflect 是一個內(nèi)置的對象，它提供攔截 JavaScript 操作的方法。這些方法與 proxy handlers 的方法相同。Reflect 不是一個函數(shù)對象，因此它是不可構造的。

在介紹 Reflect 對象的使用示例前，我們先來了解一下它的兼容性：

 

(圖片來源：https://caniuse.com/?search=Reflect)

3.1 Reflect 對象使用示例

 
 
 
 
    
  
  
  
  
  1. const man = { 
    2. 
  
  
  
  
  2.   name: "阿寶哥", 
    3. 
  
  
  
  
  3.   city: "Xiamen", 
    4. 
  
  
  
  
  4. }; 
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6. console.log(Reflect.set(man, "sex", 1)); // true 
    7. 
  
  
  
  
  7. console.log(Reflect.has(man, "name")); // true 
    8. 
  
  
  
  
  8. console.log(Reflect.has(man, "age")); // false 
    9. 
  
  
  
  
  9. console.log(Reflect.ownKeys(man)); // [ 'name', 'city', 'sex' ] 
    10.

除了示例中介紹的 set、has 和 ownKeys 方法之外，Reflect 對象還支持 get、defineProperty 和 deleteProperty 等方法。下面阿寶哥將簡單介紹 Reflect 對象所支持的一些靜態(tài)方法。

3.2 Reflect 對象支持的靜態(tài)方法

Reflect 的所有屬性和方法都是靜態(tài)的，該對象提供了與 Proxy handler 對象相關的 13 個方法。同樣，這里阿寶哥只列舉以下 5 個常用的方法：

  • Reflect.get(target, propertyKey[, receiver])：獲取對象身上某個屬性的值，類似于 target[name]。
  • Reflect.set(target, propertyKey, value[, receiver])：將值賦值給屬性的函數(shù)。返回一個布爾值，如果更新成功，則返回 true。
  • Reflect.deleteProperty(target, propertyKey)：刪除 target 對象的指定屬性，相當于執(zhí)行 delete target[name]。
  • Reflect.has(target, propertyKey)：判斷一個對象是否存在某個屬性，和 in 運算符的功能完全相同。
  • Reflect.ownKeys(target)：返回一個包含所有自身屬性(不包含繼承屬性)的數(shù)組。

在實際的 Proxy 使用場景中，我們往往會結合 Reflect 對象提供的靜態(tài)方法來實現(xiàn)某些特定的功能。為了讓大家能夠更好地理解并掌握 Proxy 對象，接下來的環(huán)節(jié)，阿寶哥將列舉 Proxy 對象的 6 個使用場景。

四、Proxy 使用場景

這里我們先來介紹 Proxy 對象的第一個使用場景 —— 增強型數(shù)組。

4.1 增強型數(shù)組

定義 enhancedArray 函數(shù)

 
 
 
 
    
  
  
  
  
  1. function enhancedArray(arr) { 
    2. 
  
  
  
  
  2.   return new Proxy(arr, { 
    3. 
  
  
  
  
  3.     get(target, property, receiver) { 
    4. 
  
  
  
  
  4.       const range = getRange(property); 
    5. 
  
  
  
  
  5.       const indices = range ? range : getIndices(property); 
    6. 
  
  
  
  
  6.       const values = indices.map(function (index) { 
    7. 
  
  
  
  
  7.         const key = index < 0 ? String(target.length + index) : index; 
    8. 
  
  
  
  
  8.         return Reflect.get(target, key, receiver); 
    9. 
  
  
  
  
  9.       }); 
    10. 
  
  
  
  
  10.       return values.length === 1 ? values[0] : values; 
    11. 
  
  
  
  
  11.     }, 
    12. 
  
  
  
  
  12.   }); 
    13. 
  
  
  
  
  13.  
    14. 
  
  
  
  
  14.   function getRange(str) { 
    15. 
  
  
  
  
  15.     var [start, end] = str.split(":").map(Number); 
    16. 
  
  
  
  
  16.     if (typeof end === "undefined") return false; 
    17. 
  
  
  
  
  17.  
    18. 
  
  
  
  
  18.     let range = []; 
    19. 
  
  
  
  
  19.     for (let i = start; i < end; i++) { 
    20. 
  
  
  
  
  20.       range = range.concat(i); 
    21. 
  
  
  
  
  21.     } 
    22. 
  
  
  
  
  22.     return range; 
    23. 
  
  
  
  
  23.   } 
    24. 
  
  
  
  
  24.  
    25. 
  
  
  
  
  25.   function getIndices(str) { 
    26. 
  
  
  
  
  26.     return str.split(",").map(Number); 
    27. 
  
  
  
  
  27.   } 
    28. 
  
  
  
  
  28. } 
    29.

使用 enhancedArray 函數(shù)

 
 
 
 
    
  
  
  
  
  1. const arr = enhancedArray([1, 2, 3, 4, 5]); 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. console.log(arr[-1]); //=> 5 
    4. 
  
  
  
  
  4. console.log(arr[[2, 4]]); //=> [ 3, 5 ] 
    5. 
  
  
  
  
  5. console.log(arr[[2, -2, 1]]); //=> [ 3, 4, 2 ] 
    6. 
  
  
  
  
  6. console.log(arr["2:4"]); //=> [ 3, 4] 
    7. 
  
  
  
  
  7. console.log(arr["-2:3"]); //=> [ 4, 5, 1, 2, 3 ] 
    8.

由以上的輸出結果可知，增強后的數(shù)組對象，就可以支持負數(shù)索引、分片索引等功能。除了可以增強數(shù)組之外，我們也可以使用 Proxy API 來增強普通對象。

4.2 增強型對象

創(chuàng)建 enhancedObject 函數(shù)

 
 
 
 
    
  
  
  
  
  1. const enhancedObject = (target) => 
    2. 
  
  
  
  
  2.   new Proxy(target, { 
    3. 
  
  
  
  
  3.     get(target, property) { 
    4. 
  
  
  
  
  4.       if (property in target) { 
    5. 
  
  
  
  
  5.         return target[property]; 
    6. 
  
  
  
  
  6.       } else { 
    7. 
  
  
  
  
  7.         return searchFor(property, target); 
    8. 
  
  
  
  
  8.       } 
    9. 
  
  
  
  
  9.     }, 
    10. 
  
  
  
  
  10.   }); 
    11. 
  
  
  
  
  11.  
    12. 
  
  
  
  
  12. let value = null; 
    13. 
  
  
  
  
  13. function searchFor(property, target) { 
    14. 
  
  
  
  
  14.   for (const key of Object.keys(target)) { 
    15. 
  
  
  
  
  15.     if (typeof target[key] === "object") { 
    16. 
  
  
  
  
  16.       searchFor(property, target[key]); 
    17. 
  
  
  
  
  17.     } else if (typeof target[property] !== "undefined") { 
    18. 
  
  
  
  
  18.       value = target[property]; 
    19. 
  
  
  
  
  19.       break; 
    20. 
  
  
  
  
  20.     } 
    21. 
  
  
  
  
  21.   } 
    22. 
  
  
  
  
  22.   return value; 
    23. 
  
  
  
  
  23. } 
    24.

使用 enhancedObject 函數(shù)

 
 
 
 
    
  
  
  
  
  1. const data = enhancedObject({ 
    2. 
  
  
  
  
  2.   user: { 
    3. 
  
  
  
  
  3.     name: "阿寶哥", 
    4. 
  
  
  
  
  4.     settings: { 
    5. 
  
  
  
  
  5.       theme: "dark", 
    6. 
  
  
  
  
  6.     }, 
    7. 
  
  
  
  
  7.   }, 
    8. 
  
  
  
  
  8. }); 
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10. console.log(data.user.settings.theme); // dark 
    11. 
  
  
  
  
  11. console.log(data.theme); // dark 
    12.

以上代碼運行后，控制臺會輸出以下代碼：

 
 
 
 
    
  
  
  
  
  1. dark 
    2. 
  
  
  
  
  2. dark 
    3.

通過觀察以上的輸出結果可知，使用 enhancedObject 函數(shù)處理過的對象，我們就可以方便地訪問普通對象內(nèi)部的深層屬性。

4.3 創(chuàng)建只讀的對象

創(chuàng)建 Proxy 對象

 
 
 
 
    
  
  
  
  
  1. const man = { 
    2. 
  
  
  
  
  2.   name: "semlinker", 
    3. 
  
  
  
  
  3. }; 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. const handler = { 
    6. 
  
  
  
  
  6.   set: "Read-Only", 
    7. 
  
  
  
  
  7.   defineProperty: "Read-Only", 
    8. 
  
  
  
  
  8.   deleteProperty: "Read-Only", 
    9. 
  
  
  
  
  9.   preventExtensions: "Read-Only", 
    10. 
  
  
  
  
  10.   setPrototypeOf: "Read-Only", 
    11. 
  
  
  
  
  11. }; 
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13. const proxy = new Proxy(man, handler); 
    14.

使用 proxy 對象

 
 
 
 
    
  
  
  
  
  1. console.log(proxy.name); 
    2. 
  
  
  
  
  2. proxy.name = "kakuqo"; 
    3.

以上代碼運行后，控制臺會輸出以下代碼：

 
 
 
 
    
  
  
  
  
  1. semlinker 
    2. 
  
  
  
  
  2. proxy.name = "kakuqo"; 
    3. 
  
  
  
  
  3.            ^ 
    4. 
  
  
  
  
  4. TypeError: 'Read-Only' returned for property 'set' of object '#' is not a function 
 
 
 
 
    觀察以上的異常信息可知，導致異常的原因是因為 handler 對象的 set 屬性值不是一個函數(shù)。如果不希望拋出運行時異常，我們可以定義一個 freeze 函數(shù)：
     
 
 
 
      
  
  
  
  
    1. function freeze (obj) { 
      2. 
  
  
  
  
    2.   return new Proxy(obj, { 
      3. 
  
  
  
  
    3.     set () { return true; }, 
      4. 
  
  
  
  
    4.     deleteProperty () { return false; }, 
      5. 
  
  
  
  
    5.     defineProperty () { return true; }, 
      6. 
  
  
  
  
    6.     setPrototypeOf () { return true; } 
      7. 
  
  
  
  
    7.   }); 
      8. 
  
  
  
  
    8. } 
      9. 
 
 
 
 
    定義好 freeze 函數(shù)，我們使用數(shù)組對象來測試一下它的功能：
     
 
 
 
      
  
  
  
  
    1. let frozen = freeze([1, 2, 3]); 
      2. 
  
  
  
  
    2. frozen[0] = 6; 
      3. 
  
  
  
  
    3. delete frozen[0]; 
      4. 
  
  
  
  
    4. frozen = Object.defineProperty(frozen, 0, { value: 66 }); 
      5. 
  
  
  
  
    5. console.log(frozen); // [ 1, 2, 3 ] 
      6. 
 
 
 
 
    上述代碼成功執(zhí)行后，控制臺會輸出 [ 1, 2, 3 ]，很明顯經(jīng)過 freeze 函數(shù)處理過的數(shù)組對象，已經(jīng)被 “凍結” 了。
    4.4 攔截方法調用
    定義 traceMethodCalls 函數(shù)
     
 
 
 
      
  
  
  
  
    1. function traceMethodCalls(obj) { 
      2. 
  
  
  
  
    2.   const handler = { 
      3. 
  
  
  
  
    3.     get(target, propKey, receiver) { 
      4. 
  
  
  
  
    4.       const origMethod = target[propKey]; // 獲取原始方法 
      5. 
  
  
  
  
    5.       return function (...args) { 
      6. 
  
  
  
  
    6.         const result = origMethod.apply(this, args); 
      7. 
  
  
  
  
    7.         console.log( 
      8. 
  
  
  
  
    8.           propKey + JSON.stringify(args) + " -> " + JSON.stringify(result) 
      9. 
  
  
  
  
    9.         ); 
      10. 
  
  
  
  
    10.         return result; 
      11. 
  
  
  
  
    11.       }; 
      12. 
  
  
  
  
    12.     }, 
      13. 
  
  
  
  
    13.   }; 
      14. 
  
  
  
  
    14.   return new Proxy(obj, handler); 
      15. 
  
  
  
  
    15. } 
      16. 
 
 
 
 
    使用 traceMethodCalls 函數(shù)
     
 
 
 
      
  
  
  
  
    1. const obj = { 
      2. 
  
  
  
  
    2.   multiply(x, y) { 
      3. 
  
  
  
  
    3.     return x * y; 
      4. 
  
  
  
  
    4.   }, 
      5. 
  
  
  
  
    5. }; 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7. const tracedObj = traceMethodCalls(obj); 
      8. 
  
  
  
  
    8. tracedObj.multiply(2, 5); // multiply[2,5] -> 10 
      9. 
 
 
 
 
    上述代碼成功執(zhí)行后，控制臺會輸出 multiply[2,5] -> 10，即我們能夠成功跟蹤 obj對象中方法的調用過程。其實，除了能夠跟蹤方法的調用，我們也可以跟蹤對象中屬性的訪問，具體示例如下：
     
 
 
 
      
  
  
  
  
    1. function tracePropAccess(obj, propKeys) { 
      2. 
  
  
  
  
    2.   const propKeySet = new Set(propKeys); 
      3. 
  
  
  
  
    3.   return new Proxy(obj, { 
      4. 
  
  
  
  
    4.     get(target, propKey, receiver) { 
      5. 
  
  
  
  
    5.       if (propKeySet.has(propKey)) { 
      6. 
  
  
  
  
    6.         console.log("GET " + propKey); 
      7. 
  
  
  
  
    7.       } 
      8. 
  
  
  
  
    8.       return Reflect.get(target, propKey, receiver); 
      9. 
  
  
  
  
    9.     }, 
      10. 
  
  
  
  
    10.     set(target, propKey, value, receiver) { 
      11. 
  
  
  
  
    11.       if (propKeySet.has(propKey)) { 
      12. 
  
  
  
  
    12.         console.log("SET " + propKey + "=" + value); 
      13. 
  
  
  
  
    13.       } 
      14. 
  
  
  
  
    14.       return Reflect.set(target, propKey, value, receiver); 
      15. 
  
  
  
  
    15.     }, 
      16. 
  
  
  
  
    16.   }); 
      17. 
  
  
  
  
    17. } 
      18. 
  
  
  
  
    18.  
      19. 
  
  
  
  
    19. const man = { 
      20. 
  
  
  
  
    20.   name: "semlinker", 
      21. 
  
  
  
  
    21. }; 
      22. 
  
  
  
  
    22. const tracedMan = tracePropAccess(man, ["name"]); 
      23. 
  
  
  
  
    23.  
      24. 
  
  
  
  
    24. console.log(tracedMan.name); // GET name; semlinker 
      25. 
  
  
  
  
    25. console.log(tracedMan.age); // undefined 
      26. 
  
  
  
  
    26. tracedMan.name = "kakuqo"; // SET name=kakuqo 
      27. 
 
 
 
 
    在以上示例中，我們定義了一個 tracePropAccess 函數(shù)，該函數(shù)接收兩個參數(shù)：obj 和 propKeys，它們分別表示需跟蹤的目標和需跟蹤的屬性列表。調用 tracePropAccess 函數(shù)后，會返回一個代理對象，當我們訪問被跟蹤的屬性時，控制臺就會輸出相應的訪問日志。
    4.5 隱藏屬性
    創(chuàng)建 hideProperty 函數(shù)
     
 
 
 
      
  
  
  
  
    1. const hideProperty = (target, prefix = "_") => 
      2. 
  
  
  
  
    2.   new Proxy(target, { 
      3. 
  
  
  
  
    3.     has: (obj, prop) => !prop.startsWith(prefix) && prop in obj, 
      4. 
  
  
  
  
    4.     ownKeys: (obj) => 
      5. 
  
  
  
  
    5.       Reflect.ownKeys(obj).filter( 
      6. 
  
  
  
  
    6.         (prop) => typeof prop !== "string" || !prop.startsWith(prefix) 
      7. 
  
  
  
  
    7.       ), 
      8. 
  
  
  
  
    8.     get: (obj, prop, rec) => (prop in rec ? obj[prop] : undefined), 
      9. 
  
  
  
  
    9.   }); 
      10. 
 
 
 
 
    使用 hideProperty 函數(shù)
     
 
 
 
      
  
  
  
  
    1. const man = hideProperty({ 
      2. 
  
  
  
  
    2.   name: "阿寶哥", 
      3. 
  
  
  
  
    3.   _pwd: "www.semlinker.com", 
      4. 
  
  
  
  
    4. }); 
      5. 
  
  
  
  
    5.  
      6. 
  
  
  
  
    6. console.log(man._pwd); // undefined 
      7. 
  
  
  
  
    7. console.log('_pwd' in man); // false 
      8. 
  
  
  
  
    8. console.log(Object.keys(man)); // [ 'name' ] 
      9. 
 
 
 
 
    通過觀察以上的輸出結果，我們可以知道，利用 Proxy API，我們實現(xiàn)了指定前綴屬性的隱藏。除了能實現(xiàn)隱藏屬性之外，利用 Proxy API，我們還可以實現(xiàn)驗證屬性值的功能。
    4.6 驗證屬性值
    創(chuàng)建 validatedUser 函數(shù)
     
 
 
 
      
  
  
  
  
    1. const validatedUser = (target) => 
      2. 
  
  
  
  
    2.   new Proxy(target, { 
      3. 
  
  
  
  
    3.     set(target, property, value) { 
      4. 
  
  
  
  
    4.       switch (property) { 
      5. 
  
  
  
  
    5.         case "email": 
      6. 
  
  
  
  
    6.           const regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
      7. 
  
  
  
  
    7.           if (!regex.test(value)) { 
      8. 
  
  
  
  
    8.             console.error("The user must have a valid email"); 
      9. 
  
  
  
  
    9.             return false; 
      10. 
  
  
  
  
    10.           } 
      11. 
  
  
  
  
    11.           break; 
      12. 
  
  
  
  
    12.         case "age": 
      13. 
  
  
  
  
    13.           if (value < 20 || value > 80) { 
      14. 
  
  
  
  
    14.             console.error("A user's age must be between 20 and 80"); 
      15. 
  
  
  
  
    15.             return false; 
      16. 
  
  
  
  
    16.           } 
      17. 
  
  
  
  
    17.           break; 
      18. 
  
  
  
  
    18.       } 
      19. 
  
  
  
  
    19.  
      20. 
  
  
  
  
    20.       return Reflect.set(...arguments); 
      21. 
  
  
  
  
    21.     }, 
      22. 
  
  
  
  
    22.   }); 
      23. 
 
 
 
 
    使用 validatedUser 函數(shù)
     
 
 
 
      
  
  
  
  
    1. let user = { 
      2. 
  
  
  
  
    2.   email: "", 
      3. 
  
  
  
  
    3.   age: 0, 
      4. 
  
  
  
  
    4. }; 
      5. 
  
  
  
  
    5.  
      6. 
  
  
  
  
    6. user = validatedUser(user); 
      7. 
  
  
  
  
    7. user.email = "semlinker.com"; // The user must have a valid email 
      8. 
  
  
  
  
    8. user.age = 100; // A user's age must be between 20 and 80 
      9. 
 
 
 
 
    上述代碼成功執(zhí)行后，控制臺會輸出以下結果：
     
 
 
 
      
  
  
  
  
    1. The user must have a valid email 
      2. 
  
  
  
  
    2. A user's age must be between 20 and 80 
      3. 
 
 
 
 
    介紹完 Proxy 對象的使用場景之后，我們來繼續(xù)介紹與 Proxy 對象相關的一些問題。
    五、Proxy 相關問題
    5.1 this 的指向問題
     
 
 
 
      
  
  
  
  
    1. const target = { 
      2. 
  
  
  
  
    2.   foo() { 
      3. 
  
  
  
  
    3.     return { 
      4. 
  
  
  
  
    4.       thisIsTarget: this === target, 
      5. 
  
  
  
  
    5.       thisIsProxy: this === proxy, 
      6. 
  
  
  
  
    6.     }; 
      7. 
  
  
  
  
    7.   }, 
      8. 
  
  
  
  
    8. }; 
      9. 
  
  
  
  
    9.  
      10. 
  
  
  
  
    10. const handler = {}; 
      11. 
  
  
  
  
    11. const proxy = new Proxy(target, handler); 
      12. 
  
  
  
  
    12. console.log(target.foo()); // { thisIsTarget: true, thisIsProxy: false } 
      13. 
  
  
  
  
    13. console.log(proxy.foo()); // { thisIsTarget: false, thisIsProxy: true } 
      14. 
 
 
 
 
    上述代碼成功執(zhí)行后，控制臺會輸出以下結果：
     
 
 
 
      
  
  
  
  
    1. { thisIsTarget: true, thisIsProxy: false } 
      2. 
  
  
  
  
    2. { thisIsTarget: false, thisIsProxy: true } 
      3. 
 
 
 
 
    通過以上輸出的結果，foo 方法中的 this 指向與當前的調用者有關?？雌饋硗唵蔚?，但在一些場景下如果稍不注意的話，就會出現(xiàn)問題，比如以下這個示例：
     
 
 
 
      
  
  
  
  
    1. const _name = new WeakMap(); 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3. class Person { 
      4. 
  
  
  
  
    4.   constructor(name) { 
      5. 
  
  
  
  
    5.     _name.set(this, name); 
      6. 
  
  
  
  
    6.   } 
      7. 
  
  
  
  
    7.    
      8. 
  
  
  
  
    8.   get name() { 
      9. 
  
  
  
  
    9.     return _name.get(this); 
      10. 
  
  
  
  
    10.   } 
      11. 
  
  
  
  
    11. } 
      12. 
 
 
 
 
    在以上示例中，我們使用 WeakMap 對象來存儲 Person 對象的私有信息。定義完 Person類，我們就可以通過以下方式來使用它：
     
 
 
 
      
  
  
  
  
    1. const man = new Person("阿寶哥"); 
      2. 
  
  
  
  
    2. console.log(man.name); // 阿寶哥 
      3. 
  
  
  
  
    3.  
      4. 
  
  
  
  
    4. const proxy = new Proxy(man, {}); 
      5. 
  
  
  
  
    5. console.log(proxy.name); // undefined 
      6. 
 
 
 
 
    對于以上的代碼，當我們通過 proxy 對象來訪問 name 屬性時，你會發(fā)現(xiàn)輸出的結果是undefined。這是因為當使用 proxy.name 的方式訪問 name 屬性時，this 指向的是 proxy 對象，而 _name WeakMap 對象中存儲的是 man 對象，所以輸出的結果是 undefined。
    然而，對于以上的問題，如果我們按照以下方式定義 Person 類，就不會出現(xiàn)以上問題：
     
 
 
 
      
  
  
  
  
    1. class Person { 
      2. 
  
  
  
  
    2.   constructor(name) { 
      3. 
  
  
  
  
    3.     this._name = name; 
      4. 
  
  
  
  
    4.   } 
      5. 
  
  
  
  
    5.   get name() { 
      6. 
  
  
  
  
    6.     return this._name; 
      7. 
  
  
  
  
    7.   } 
      8. 
  
  
  
  
    8. } 
      9. 
  
  
  
  
    9.  
      10. 
  
  
  
  
    10. const man = new Person("阿寶哥"); 
      11. 
  
  
  
  
    11. console.log(man.name); // 阿寶哥 
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13. const proxy = new Proxy(man, {}); 
      14. 
  
  
  
  
    14. console.log(proxy.name); // 阿寶哥 
      15. 
 
 
 
 
    另外，如果你對 WeakMap 感興趣的話，可以閱讀 你不知道的 WeakMap 這篇文章。
    5.2 get 捕獲器 receiver 參數(shù)是什么
     
 
 
 
      
  
  
  
  
    1. const p = new Proxy(target, { 
      2. 
  
  
  
  
    2.   get: function(target, property, receiver) { 
      3. 
  
  
  
  
    3.     // receiver 
      4. 
  
  
  
  
    4.   } 
      5. 
  
  
  
  
    5. }); 
      6. 
 
 
 
 
    get 捕獲器用于攔截對象的讀取屬性操作，該捕獲器含有三個參數(shù)：
      

    • target：目標對象。
      • 

    • property：被讀取的屬性名。
      • 

    • receiver：指向當前的 Proxy 對象或者繼承于當前 Proxy 的對象。
      • 

    

    為了更好地了解 receiver 參數(shù)的描述信息，我們來舉個具體的示例：
     
 
 
 
      
  
  
  
  
    1. const proxy = new Proxy({}, 
      2. 
  
  
  
  
    2.   { 
      3. 
  
  
  
  
    3.     get: function (target, property, receiver) { 
      4. 
  
  
  
  
    4.       return receiver; 
      5. 
  
  
  
  
    5.     }, 
      6. 
  
  
  
  
    6.   } 
      7. 
  
  
  
  
    7. ); 
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9. console.dir(proxy.getReceiver === proxy); // true 
      10. 
  
  
  
  
    10. var inherits = Object.create(proxy); 
      11. 
  
  
  
  
    11. console.dir(inherits.getReceiver === inherits); // true 
      12. 
 
 
 
 
    那么我們能否改變 receiver 指向的對象呢?答案是可以的，通過 Reflect 對象提供的get 方法，我們可以動態(tài)設置 receiver 對象的值，具體使用方式如下所示：
     
 
 
 
      
  
  
  
  
    1. console.dir(Reflect.get(proxy, "getReceiver", "阿寶哥")); 
      2. 
 
 
 
 
    其實 receiver 的名稱是來源于 ECMAScript 規(guī)范：
      

    • [[Get]] (propertyKey, Receiver) → any Return the value of the property whose key is propertyKey from this object. If any ECMAScript code must be executed to retrieve the property value, Receiver is used as the this value when evaluating the code.
      • 

    • [[Set]] ?(propertyKey, value, Receiver) → Boolean Set the value of the property whose key is propertyKey to value. If any ECMAScript code must be executed to set the property value, Receiver is used as the this value when evaluating the code. Returns true if the property value was set or false if it could not be set.
      • 

    

    以上的 [[Get]] 和 [[Set]] 被稱為內(nèi)部方法，ECMAScript 引擎中的每個對象都與一組內(nèi)部方法相關聯(lián)，這些內(nèi)部方法定義了其運行時行為。
    需要注意的是，這些內(nèi)部方法不是 ECMAScript 語言的一部分。對于對象的訪問器屬性來說，在執(zhí)行內(nèi)部代碼時，Receiver 將被作為 this 的值，同樣使用 Reflect 對象提供的 API，我們也可以通過設置 receiver 參數(shù)的值來改變 this 的值：
     
 
 
 
      
  
  
  
  
    1. const obj = { 
      2. 
  
  
  
  
    2.   get foo() { 
      3. 
  
  
  
  
    3.     return this.bar; 
      4. 
  
  
  
  
    4.   }, 
      5. 
  
  
  
  
    5. }; 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7. console.log(Reflect.get(obj, "foo")); // undefined 
      8. 
  
  
  
  
    8. console.log(Reflect.get(obj, "foo", { bar: 2021 })); // 2021 
      9. 
 
 
 
 
    5.3 包裝內(nèi)置構造函數(shù)的實例
    當使用 Proxy 包裝內(nèi)置構造函數(shù)實例的時候，可能會出現(xiàn)一些問題。比如使用 Proxy 代理 Date 構造函數(shù)的實例：
     
 
 
 
      
  
  
  
  
    1. const target = new Date(); 
      2. 
  
  
  
  
    2. const handler = {}; 
      3. 
  
  
  
  
    3. const proxy = new Proxy(target, handler); 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5. proxy.getDate(); // Error 
      6. 
 
 
 
 
    當以上代碼運行后，控制臺會輸出以下異常信息：
     
 
 
 
      
  
  
  
  
    1. proxy.getDate(); 
      2. 
  
  
  
  
    2.       ^ 
      3. 
  
  
  
  
    3. TypeError: this is not a Date object. 
      4. 
 
 
 
 
    出現(xiàn)以上問題的原因是因為有些原生對象的內(nèi)部屬性，只有通過正確的 this 才能拿到，所以 Proxy 無法代理這些原生對象的屬性。那么如何解決這個問題呢?要解決這個問題，我們可以為 getDate 方法綁定正確的 this：
     
 
 
 
      
  
  
  
  
    1. const target = new Date(); 
      2. 
  
  
  
  
    2. const handler = { 
      3. 
  
  
  
  
    3.   get(target, property, receiver) { 
      4. 
  
  
  
  
    4.     if (property === "getDate") { 
      5. 
  
  
  
  
    5.       return target.getDate.bind(target); 
      6. 
  
  
  
  
    6.     } 
      7. 
  
  
  
  
    7.     return Reflect.get(target, property, receiver); 
      8. 
  
  
  
  
    8.   }, 
      9. 
  
  
  
  
    9. }; 
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11. const proxy = new Proxy(target, handler); 
      12. 
  
  
  
  
    12. console.log(proxy.getDate()); 
      13. 
 
 
 
 
    5.4 創(chuàng)建可撤銷的代理對象
    通過 Proxy.revocable() 方法可以用來創(chuàng)建一個可撤銷的代理對象，該方法的簽名為：
     
 
 
 
      
  
  
  
  
    1. Proxy.revocable(target, handler); 
      2. 
 
 
 
 
    相關的參數(shù)說明如下：
      

    • target：將用 Proxy 封裝的目標對象。可以是任何類型的對象，包括原生數(shù)組，函數(shù)，甚至可以是另外一個代理對象。
      • 

    • handler：一個對象，其屬性是一批可選的函數(shù)，這些函數(shù)定義了對應的操作被執(zhí)行時代理的行為。
      • 

    

    調用 Proxy.revocable 方法之后，其返回值是一個對象，其結構為：{"proxy": proxy, "revoke": revoke}，其中：
      

    • proxy：表示新生成的代理對象本身，和用一般方式 new Proxy(target, handler) 創(chuàng)建的代理對象沒什么不同，只是它可以被撤銷掉。
      • 

    • revoke：撤銷方法，調用的時候不需要加任何參數(shù)，就可以撤銷掉和它一起生成的那個代理對象。
      • 

    

    了解完 revocable 方法之后，我們來舉一個具體的示例：
     
 
 
 
      
  
  
  
  
    1. const target = {};  
      2. 
  
  
  
  
    2. const handler = {}; 
      3. 
  
  
  
  
    3. const { proxy, revoke } = Proxy.revocable(target, handler); 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5. proxy.name = "阿寶哥"; 
      6. 
  
  
  
  
    6. console.log(proxy.name); // 阿寶哥 
      7. 
  
  
  
  
    7.  
      8. 
  
  
  
  
    8. revoke(); 
      9. 
  
  
  
  
    9. console.log(proxy.name); // TypeError: Revoked 
      10. 
 
 
 
 
    當以上代碼成功運行之后，控制臺會輸出以下內(nèi)容：
     
 
 
 
      
  
  
  
  
    1. 阿寶哥 
      2. 
  
  
  
  
    2. Uncaught TypeError: Cannot perform 'get' on a proxy that has been revoked 
      3. 
  
  
  
  
    3.   at  
      4. 
 
 
 
 
    通過觀察以上的結果，我們可知當 proxy 對象被撤銷之后，我們就沒有辦法對已撤銷的proxy 對象執(zhí)行任何操作。
    六、Proxy 在開源項目中的應用
    因為 Proxy 對象能夠提供強大的攔截能力，所以它被應用在一些成熟的開源項目中，用于實現(xiàn)響應式的功能，比如 vue-next 和 observer-util 項目。對于 observer-util 這個項目，阿寶哥已經(jīng)寫了一篇 從觀察者模式到響應式的設計原理 的文章來介紹該項目，感興趣的小伙伴可以自行閱讀。
    而對于 vue-next 項目來說，響應式的功能被封裝在 @vue/reactivity 模塊中，該模塊為我們提供了一個 reactive 函數(shù)來創(chuàng)建響應式對象。下面我們來簡單了解一下 reactive函數(shù)的實現(xiàn)：
     
 
 
 
      
  
  
  
  
    1. // packages/reactivity/src/reactive.ts 
      2. 
  
  
  
  
    2. export function reactive(target: object) { 
      3. 
  
  
  
  
    3.   if (target && (target as Target)[ReactiveFlags.IS_READONLY]) { 
      4. 
  
  
  
  
    4.     return target 
      5. 
  
  
  
  
    5.   } 
      6. 
  
  
  
  
    6.   return createReactiveObject( 
      7. 
  
  
  
  
    7.     target, 
      8. 
  
  
  
  
    8.     false, 
      9. 
  
  
  
  
    9.     mutableHandlers, 
      10. 
  
  
  
  
    10.     mutableCollectionHandlers 
      11. 
  
  
  
  
    11.   ) 
      12. 
  
  
  
  
    12. } 
      13. 
 
 
 
 
    在 reactive 函數(shù)內(nèi)部，會繼續(xù)調用 createReactiveObject 函數(shù)來創(chuàng)建響應式對象，該函數(shù)也是被定義在 reactive.ts 文件中，該函數(shù)的的具體實現(xiàn)如下：
     
 
 
 
      
  
  
  
  
    1. // packages/reactivity/src/reactive.ts 
      2. 
  
  
  
  
    2. function createReactiveObject( 
      3. 
  
  
  
  
    3.   target: Target, 
      4. 
  
  
  
  
    4.   isReadonly: boolean, 
      5. 
  
  
  
  
    5.   baseHandlers: ProxyHandler, 
      6. 
  
  
  
  
    6.   collectionHandlers: ProxyHandler 
      7. 
  
  
  
  
    7. ) { 
      8. 
  
  
  
  
    8.   // 省略部分代碼   
      9. 
  
  
  
  
    9.   const proxyMap = isReadonly ? readonlyMap : reactiveMap 
      10. 
  
  
  
  
    10.   const existingProxy = proxyMap.get(target) 
      11. 
  
  
  
  
    11.   if (existingProxy) { 
      12. 
  
  
  
  
    12.     return existingProxy 
      13. 
  
  
  
  
    13.   } 
      14. 
  
  
  
  
    14.   const proxy = new Proxy( 
      15. 
  
  
  
  
    15.     target, 
      16. 
  
  
  
  
    16.     targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers 
      17. 
  
  
  
  
    17.   ) 
      18. 
  
  
  
  
    18.   proxyMap.set(target, proxy) 
      19. 
  
  
  
  
    19.   return proxy 
      20. 
  
  
  
  
    20. } 
      21. 
 
 
 
 
    在 createReactiveObject 函數(shù)內(nèi)部，我們終于見到了期待已久的 Proxy 對象。當 target 對象不是集合類型的對象，比如 Map、Set、WeakMap 和 WeakSet 時，在創(chuàng)建 Proxy 對象時，使用的是 baseHandlers，該 handler 對象定義了以下 5 種捕獲器：
     
 
 
 
      
  
  
  
  
    1. export const mutableHandlers: ProxyHandler = { 
  
  
  
  
    2.   get, 
      3. 
  
  
  
  
    3.   set, 
      4. 
  
  
  
  
    4.   deleteProperty, 
      5. 
  
  
  
  
    5.   has, 
      6. 
  
  
  
  
    6.   ownKeys 
      7. 
  
  
  
  
    7. } 
      8. 
 
 
 
 
      其中 get 和 set 捕獲器是分別用于收集 effect 函數(shù)和觸發(fā) effect 函數(shù)的執(zhí)行。好了，這里阿寶哥只是介紹一下 @vue/reactivity 中的 reactive 函數(shù)，關于該模塊是如何實現(xiàn)響應式的細節(jié)，這里就不展開介紹了，阿寶哥后續(xù)會單獨寫一篇文章來詳細分析該模塊的功能。
      七、參考資源MDN - Proxy
      MDN - Reflect
      exploringjs - proxies
      stackoverflow - what-is-a-receiver-in-javascript
                          
      
                    分享標題：聊聊你不知道的Proxy                    
      
                    網(wǎng)站鏈接：http://uogjgqi.cn/article/dpjhjgp.html
                
                
      
                    
      
                    
      
                        
      掃二維碼與項目經(jīng)理溝通
      
                        
      我們在微信上24小時期待你的聲音
      
                        
      解答本文疑問/技術咨詢/運營咨詢/技術建議/互聯(lián)網(wǎng)交流