在 從觀察者模式到響應(yīng)式的設(shè)計原理 這篇文章中，阿寶哥介紹了 observer-util 這個庫如何使用 Proxy 來實現(xiàn)響應(yīng)式。而對于 vue-next 項目中的 @vue/reactivity 模塊，也是利用 Proxy 來實現(xiàn)響應(yīng)式。因此，如果你要學(xué)習(xí) @vue/reactivity 模塊的話，就需要先掌握 Proxy。

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

• 代理的作用；
• Proxy 對象與 Reflect 對象的相關(guān)知識；
• Proxy 對象的 6 個使用場景；
• 使用 Proxy 對象時的一些注意事項；
• Proxy 在開源項目中的應(yīng)用。

一、聊一聊代理

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

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

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

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

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

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

二、Proxy 對象簡介

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

const?p?=?new?Proxy(target,?handler)

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

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

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

（圖片來源：https://caniuse.com/?search=Proxy）

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

2.1 Proxy 對象使用示例

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

const?man?=?{
??name:?"阿寶哥",
};

const?proxy?=?new?Proxy(man,?{
??get(target,?property,?receiver)?{
????console.log(`正在訪問${property}屬性`);
????return?target[property];
??},
});

console.log(proxy.name);
console.log(proxy.age);

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

在設(shè)置了 get 捕獲器之后，當(dāng)成功運行以上的示例代碼，控制臺會輸出以下結(jié)果：

正在訪問name屬性
阿寶哥
正在訪問age屬性
undefined

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

2.2 handler 對象支持的捕獲器

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

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

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

三、Reflect 對象簡介

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

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

（圖片來源：https://caniuse.com/?search=Reflect）

3.1 Reflect 對象使用示例

const?man?=?{
??name:?"阿寶哥",
??city:?"Xiamen",
};

console.log(Reflect.set(man,?"sex",?1));?//?true
console.log(Reflect.has(man,?"name"));?//?true
console.log(Reflect.has(man,?"age"));?//?false
console.log(Reflect.ownKeys(man));?//?[?'name',?'city',?'sex'?]

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

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

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

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

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

四、Proxy 使用場景

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

4.1 增強型數(shù)組

定義 enhancedArray 函數(shù)

function?enhancedArray(arr)?{
??return?new?Proxy(arr,?{
????get(target,?property,?receiver)?{
??????const?range?=?getRange(property);
??????const?indices?=?range???range?:?getIndices(property);
??????const?values?=?indices.map(function?(index)?{
????????const?key?=?index?0???String(target.length?+?index)?:?index;
????????return?Reflect.get(target,?key,?receiver);
??????});
??????return?values.length?===?1???values[0]?:?values;
????},
??});

??function?getRange(str)?{
????var?[start,?end]?=?str.split(":").map(Number);
????if?(typeof?end?===?"undefined")?return?false;

????let?range?=?[];
????for?(let?i?=?start;?i???????range?=?range.concat(i);
????}
????return?range;
??}

??function?getIndices(str)?{
????return?str.split(",").map(Number);
??}
}

使用 enhancedArray 函數(shù)

const?arr?=?enhancedArray([1,?2,?3,?4,?5]);

console.log(arr[-1]);?//=>?5
console.log(arr[[2,?4]]);?//=>?[?3,?5?]
console.log(arr[[2,?-2,?1]]);?//=>?[?3,?4,?2?]
console.log(arr["2:4"]);?//=>?[?3,?4]
console.log(arr["-2:3"]);?//=>?[?4,?5,?1,?2,?3?]

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

4.2 增強型對象

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

const?enhancedObject?=?(target)?=>
??new?Proxy(target,?{
????get(target,?property)?{
??????if?(property?in?target)?{
????????return?target[property];
??????}?else?{
????????return?searchFor(property,?target); //實際使用時要對value值進(jìn)行復(fù)位
??????}
????},
??});

let?value?=?null;
function?searchFor(property,?target)?{
??for?(const?key?of?Object.keys(target))?{
????if?(typeof?target[key]?===?"object")?{
??????searchFor(property,?target[key]);
????}?else?if?(typeof?target[property]?!==?"undefined")?{
??????value?=?target[property];
??????break;
????}
??}
??return?value;
}

使用 enhancedObject 函數(shù)

const?data?=?enhancedObject({
??user:?{
????name:?"阿寶哥",
????settings:?{
??????theme:?"dark",
????},
??},
});

console.log(data.user.settings.theme);?//?dark
console.log(data.theme);?//?dark

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

dark
dark

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

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

創(chuàng)建 Proxy 對象

const?man?=?{
??name:?"semlinker",
};

const?handler?=?{
??set:?"Read-Only",
??defineProperty:?"Read-Only",
??deleteProperty:?"Read-Only",
??preventExtensions:?"Read-Only",
??setPrototypeOf:?"Read-Only",
};

const?proxy?=?new?Proxy(man,?handler);

使用 proxy 對象

console.log(proxy.name);
proxy.name?=?"kakuqo";

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

semlinker
proxy.name?=?"kakuqo";
???????????^
TypeError:?'Read-Only'?returned?for?property?'set'?of?object?'#