[[379873]]

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

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

• 代理的作用;
• Proxy 對(duì)象與 Reflect 對(duì)象的相關(guān)知識(shí);
• Proxy 對(duì)象的 6 個(gè)使用場(chǎng)景;
• 使用 Proxy 對(duì)象時(shí)的一些注意事項(xiàng);
• Proxy 在開(kāi)源項(xiàng)目中的應(yīng)用。

一、聊一聊代理

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

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

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

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

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

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

二、Proxy 對(duì)象簡(jiǎn)介

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

const p = new Proxy(target, handler) 

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

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

在介紹 Proxy 對(duì)象的使用示例前，我們先來(lái)了解一下它的兼容性：

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

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

2.1 Proxy 對(duì)象使用示例

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

const man = { 
  name: "阿寶哥", 
}; 
 
const proxy = new Proxy(man, { 
  get(target, property, receiver) { 
    console.log(`正在訪問(wèn)${property}屬性`); 
    return target[property]; 
  }, 
}); 
 
console.log(proxy.name); 
console.log(proxy.age); 

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

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

正在訪問(wèn)name屬性 
阿寶哥 
正在訪問(wèn)age屬性 
undefined 

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

2.2 handler 對(duì)象支持的捕獲器

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

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

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

三、Reflect 對(duì)象簡(jiǎn)介

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

在介紹 Reflect 對(duì)象的使用示例前，我們先來(lái)了解一下它的兼容性：

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

3.1 Reflect 對(duì)象使用示例

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 對(duì)象還支持 get、defineProperty 和 deleteProperty 等方法。下面阿寶哥將簡(jiǎn)單介紹 Reflect 對(duì)象所支持的一些靜態(tài)方法。

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

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

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

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

四、Proxy 使用場(chǎng)景

這里我們先來(lái)介紹 Proxy 對(duì)象的第一個(gè)使用場(chǎng)景 —— 增強(qiáng)型數(shù)組。

4.1 增強(qiáng)型數(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 < end; 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é)果可知，增強(qiáng)后的數(shù)組對(duì)象，就可以支持負(fù)數(shù)索引、分片索引等功能。除了可以增強(qiáng)數(shù)組之外，我們也可以使用 Proxy API 來(lái)增強(qiáng)普通對(duì)象。

4.2 增強(qiáng)型對(duì)象

創(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); 
      } 
    }, 
  }); 
 
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 

以上代碼運(yùn)行后，控制臺(tái)會(huì)輸出以下代碼：

dark 
dark 

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

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

創(chuàng)建 Proxy 對(duì)象

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 對(duì)象

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

以上代碼運(yùn)行后，控制臺(tái)會(huì)輸出以下代碼：

semlinker 
proxy.name = "kakuqo"; 
           ^ 
TypeError: 'Read-Only' returned for property 'set' of object '#<Object>' is not a function 

觀察以上的異常信息可知，導(dǎo)致異常的原因是因?yàn)?handler 對(duì)象的 set 屬性值不是一個(gè)函數(shù)。如果不希望拋出運(yùn)行時(shí)異常，我們可以定義一個(gè) freeze 函數(shù)：

function freeze (obj) { 
  return new Proxy(obj, { 
    set () { return true; }, 
    deleteProperty () { return false; }, 
    defineProperty () { return true; }, 
    setPrototypeOf () { return true; } 
  }); 
} 

定義好 freeze 函數(shù)，我們使用數(shù)組對(duì)象來(lái)測(cè)試一下它的功能：

let frozen = freeze([1, 2, 3]); 
frozen[0] = 6; 
delete frozen[0]; 
frozen = Object.defineProperty(frozen, 0, { value: 66 }); 
console.log(frozen); // [ 1, 2, 3 ] 

上述代碼成功執(zhí)行后，控制臺(tái)會(huì)輸出 [ 1, 2, 3 ]，很明顯經(jīng)過(guò) freeze 函數(shù)處理過(guò)的數(shù)組對(duì)象，已經(jīng)被 “凍結(jié)” 了。

4.4 攔截方法調(diào)用

定義 traceMethodCalls 函數(shù)

function traceMethodCalls(obj) { 
  const handler = { 
    get(target, propKey, receiver) { 
      const origMethod = target[propKey]; // 獲取原始方法 
      return function (...args) { 
        const result = origMethod.apply(this, args); 
        console.log( 
          propKey + JSON.stringify(args) + " -> " + JSON.stringify(result) 
        ); 
        return result; 
      }; 
    }, 
  }; 
  return new Proxy(obj, handler); 
} 

使用 traceMethodCalls 函數(shù)

const obj = { 
  multiply(x, y) { 
    return x * y; 
  }, 
}; 
 
const tracedObj = traceMethodCalls(obj); 
tracedObj.multiply(2, 5); // multiply[2,5] -> 10 

上述代碼成功執(zhí)行后，控制臺(tái)會(huì)輸出 multiply[2,5] -> 10，即我們能夠成功跟蹤 obj對(duì)象中方法的調(diào)用過(guò)程。其實(shí)，除了能夠跟蹤方法的調(diào)用，我們也可以跟蹤對(duì)象中屬性的訪問(wèn)，具體示例如下：

function tracePropAccess(obj, propKeys) { 
  const propKeySet = new Set(propKeys); 
  return new Proxy(obj, { 
    get(target, propKey, receiver) { 
      if (propKeySet.has(propKey)) { 
        console.log("GET " + propKey); 
      } 
      return Reflect.get(target, propKey, receiver); 
    }, 
    set(target, propKey, value, receiver) { 
      if (propKeySet.has(propKey)) { 
        console.log("SET " + propKey + "=" + value); 
      } 
      return Reflect.set(target, propKey, value, receiver); 
    }, 
  }); 
} 
 
const man = { 
  name: "semlinker", 
}; 
const tracedMan = tracePropAccess(man, ["name"]); 
 
console.log(tracedMan.name); // GET name; semlinker 
console.log(tracedMan.age); // undefined 
tracedMan.name = "kakuqo"; // SET name=kakuqo 

在以上示例中，我們定義了一個(gè) tracePropAccess 函數(shù)，該函數(shù)接收兩個(gè)參數(shù)：obj 和 propKeys，它們分別表示需跟蹤的目標(biāo)和需跟蹤的屬性列表。調(diào)用 tracePropAccess 函數(shù)后，會(huì)返回一個(gè)代理對(duì)象，當(dāng)我們?cè)L問(wèn)被跟蹤的屬性時(shí)，控制臺(tái)就會(huì)輸出相應(yīng)的訪問(wèn)日志。

4.5 隱藏屬性

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

const hideProperty = (target, prefix = "_") => 
  new Proxy(target, { 
    has: (obj, prop) => !prop.startsWith(prefix) && prop in obj, 
    ownKeys: (obj) => 
      Reflect.ownKeys(obj).filter( 
        (prop) => typeof prop !== "string" || !prop.startsWith(prefix) 
      ), 
    get: (obj, prop, rec) => (prop in rec ? obj[prop] : undefined), 
  }); 

使用 hideProperty 函數(shù)

const man = hideProperty({ 
  name: "阿寶哥", 
  _pwd: "www.semlinker.com", 
}); 
 
console.log(man._pwd); // undefined 
console.log('_pwd' in man); // false 
console.log(Object.keys(man)); // [ 'name' ] 

通過(guò)觀察以上的輸出結(jié)果，我們可以知道，利用 Proxy API，我們實(shí)現(xiàn)了指定前綴屬性的隱藏。除了能實(shí)現(xiàn)隱藏屬性之外，利用 Proxy API，我們還可以實(shí)現(xiàn)驗(yàn)證屬性值的功能。

4.6 驗(yàn)證屬性值

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

const validatedUser = (target) => 
  new Proxy(target, { 
    set(target, property, value) { 
      switch (property) { 
        case "email": 
          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,}))$/; 
          if (!regex.test(value)) { 
            console.error("The user must have a valid email"); 
            return false; 
          } 
          break; 
        case "age": 
          if (value < 20 || value > 80) { 
            console.error("A user's age must be between 20 and 80"); 
            return false; 
          } 
          break; 
      } 
 
      return Reflect.set(...arguments); 
    }, 
  }); 

使用 validatedUser 函數(shù)

let user = { 
  email: "", 
  age: 0, 
}; 
 
user = validatedUser(user); 
user.email = "semlinker.com"; // The user must have a valid email 
user.age = 100; // A user's age must be between 20 and 80 

上述代碼成功執(zhí)行后，控制臺(tái)會(huì)輸出以下結(jié)果：

The user must have a valid email 
A user's age must be between 20 and 80 

介紹完 Proxy 對(duì)象的使用場(chǎng)景之后，我們來(lái)繼續(xù)介紹與 Proxy 對(duì)象相關(guān)的一些問(wèn)題。

五、Proxy 相關(guān)問(wèn)題

5.1 this 的指向問(wèn)題

const target = { 
  foo() { 
    return { 
      thisIsTarget: this === target, 
      thisIsProxy: this === proxy, 
    }; 
  }, 
}; 
 
const handler = {}; 
const proxy = new Proxy(target, handler); 
console.log(target.foo()); // { thisIsTarget: true, thisIsProxy: false } 
console.log(proxy.foo()); // { thisIsTarget: false, thisIsProxy: true } 

上述代碼成功執(zhí)行后，控制臺(tái)會(huì)輸出以下結(jié)果：

{ thisIsTarget: true, thisIsProxy: false } 
{ thisIsTarget: false, thisIsProxy: true } 

通過(guò)以上輸出的結(jié)果，foo 方法中的 this 指向與當(dāng)前的調(diào)用者有關(guān)。看起來(lái)挺簡(jiǎn)單的，但在一些場(chǎng)景下如果稍不注意的話，就會(huì)出現(xiàn)問(wèn)題，比如以下這個(gè)示例：

const _name = new WeakMap(); 
 
class Person { 
  constructor(name) { 
    _name.set(this, name); 
  } 
   
  get name() { 
    return _name.get(this); 
  } 
} 

在以上示例中，我們使用 WeakMap 對(duì)象來(lái)存儲(chǔ) Person 對(duì)象的私有信息。定義完 Person類(lèi)，我們就可以通過(guò)以下方式來(lái)使用它：

const man = new Person("阿寶哥"); 
console.log(man.name); // 阿寶哥 
 
const proxy = new Proxy(man, {}); 
console.log(proxy.name); // undefined 

對(duì)于以上的代碼，當(dāng)我們通過(guò) proxy 對(duì)象來(lái)訪問(wèn) name 屬性時(shí)，你會(huì)發(fā)現(xiàn)輸出的結(jié)果是undefined。這是因?yàn)楫?dāng)使用 proxy.name 的方式訪問(wèn) name 屬性時(shí)，this 指向的是 proxy 對(duì)象，而 _name WeakMap 對(duì)象中存儲(chǔ)的是 man 對(duì)象，所以輸出的結(jié)果是 undefined。

然而，對(duì)于以上的問(wèn)題，如果我們按照以下方式定義 Person 類(lèi)，就不會(huì)出現(xiàn)以上問(wèn)題：

class Person { 
  constructor(name) { 
    this._name = name; 
  } 
  get name() { 
    return this._name; 
  } 
} 
 
const man = new Person("阿寶哥"); 
console.log(man.name); // 阿寶哥 
 
const proxy = new Proxy(man, {}); 
console.log(proxy.name); // 阿寶哥 

另外，如果你對(duì) WeakMap 感興趣的話，可以閱讀 你不知道的 WeakMap 這篇文章。

5.2 get 捕獲器 receiver 參數(shù)是什么

const p = new Proxy(target, { 
  get: function(target, property, receiver) { 
    // receiver 
  } 
}); 

get 捕獲器用于攔截對(duì)象的讀取屬性操作，該捕獲器含有三個(gè)參數(shù)：

• target：目標(biāo)對(duì)象。
• property：被讀取的屬性名。
• receiver：指向當(dāng)前的 Proxy 對(duì)象或者繼承于當(dāng)前 Proxy 的對(duì)象。

為了更好地了解 receiver 參數(shù)的描述信息，我們來(lái)舉個(gè)具體的示例：

const proxy = new Proxy({}, 
  { 
    get: function (target, property, receiver) { 
      return receiver; 
    }, 
  } 
); 
 
console.dir(proxy.getReceiver === proxy); // true 
var inherits = Object.create(proxy); 
console.dir(inherits.getReceiver === inherits); // true 

那么我們能否改變 receiver 指向的對(duì)象呢?答案是可以的，通過(guò) Reflect 對(duì)象提供的get 方法，我們可以動(dòng)態(tài)設(shè)置 receiver 對(duì)象的值，具體使用方式如下所示：

console.dir(Reflect.get(proxy, "getReceiver", "阿寶哥")); 

其實(shí) receiver 的名稱(chēng)是來(lái)源于 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]] 被稱(chēng)為內(nèi)部方法，ECMAScript 引擎中的每個(gè)對(duì)象都與一組內(nèi)部方法相關(guān)聯(lián)，這些內(nèi)部方法定義了其運(yùn)行時(shí)行為。

需要注意的是，這些內(nèi)部方法不是 ECMAScript 語(yǔ)言的一部分。對(duì)于對(duì)象的訪問(wèn)器屬性來(lái)說(shuō)，在執(zhí)行內(nèi)部代碼時(shí)，Receiver 將被作為 this 的值，同樣使用 Reflect 對(duì)象提供的 API，我們也可以通過(guò)設(shè)置 receiver 參數(shù)的值來(lái)改變 this 的值：

const obj = { 
  get foo() { 
    return this.bar; 
  }, 
}; 
 
console.log(Reflect.get(obj, "foo")); // undefined 
console.log(Reflect.get(obj, "foo", { bar: 2021 })); // 2021 

5.3 包裝內(nèi)置構(gòu)造函數(shù)的實(shí)例

當(dāng)使用 Proxy 包裝內(nèi)置構(gòu)造函數(shù)實(shí)例的時(shí)候，可能會(huì)出現(xiàn)一些問(wèn)題。比如使用 Proxy 代理 Date 構(gòu)造函數(shù)的實(shí)例：

const target = new Date(); 
const handler = {}; 
const proxy = new Proxy(target, handler); 
 
proxy.getDate(); // Error 

當(dāng)以上代碼運(yùn)行后，控制臺(tái)會(huì)輸出以下異常信息：

proxy.getDate(); 
      ^ 
TypeError: this is not a Date object. 

出現(xiàn)以上問(wèn)題的原因是因?yàn)橛行┰鷮?duì)象的內(nèi)部屬性，只有通過(guò)正確的 this 才能拿到，所以 Proxy 無(wú)法代理這些原生對(duì)象的屬性。那么如何解決這個(gè)問(wèn)題呢?要解決這個(gè)問(wèn)題，我們可以為 getDate 方法綁定正確的 this：

const target = new Date(); 
const handler = { 
  get(target, property, receiver) { 
    if (property === "getDate") { 
      return target.getDate.bind(target); 
    } 
    return Reflect.get(target, property, receiver); 
  }, 
}; 
 
const proxy = new Proxy(target, handler); 
console.log(proxy.getDate()); 

5.4 創(chuàng)建可撤銷(xiāo)的代理對(duì)象

通過(guò) Proxy.revocable() 方法可以用來(lái)創(chuàng)建一個(gè)可撤銷(xiāo)的代理對(duì)象，該方法的簽名為：

Proxy.revocable(target, handler); 

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

• target：將用 Proxy 封裝的目標(biāo)對(duì)象。可以是任何類(lèi)型的對(duì)象，包括原生數(shù)組，函數(shù)，甚至可以是另外一個(gè)代理對(duì)象。
• handler：一個(gè)對(duì)象，其屬性是一批可選的函數(shù)，這些函數(shù)定義了對(duì)應(yīng)的操作被執(zhí)行時(shí)代理的行為。

調(diào)用 Proxy.revocable 方法之后，其返回值是一個(gè)對(duì)象，其結(jié)構(gòu)為：{"proxy": proxy, "revoke": revoke}，其中：

• proxy：表示新生成的代理對(duì)象本身，和用一般方式 new Proxy(target, handler) 創(chuàng)建的代理對(duì)象沒(méi)什么不同，只是它可以被撤銷(xiāo)掉。
• revoke：撤銷(xiāo)方法，調(diào)用的時(shí)候不需要加任何參數(shù)，就可以撤銷(xiāo)掉和它一起生成的那個(gè)代理對(duì)象。

了解完 revocable 方法之后，我們來(lái)舉一個(gè)具體的示例：

const target = {};  
const handler = {}; 
const { proxy, revoke } = Proxy.revocable(target, handler); 
 
proxy.name = "阿寶哥"; 
console.log(proxy.name); // 阿寶哥 
 
revoke(); 
console.log(proxy.name); // TypeError: Revoked 

當(dāng)以上代碼成功運(yùn)行之后，控制臺(tái)會(huì)輸出以下內(nèi)容：

阿寶哥 
Uncaught TypeError: Cannot perform 'get' on a proxy that has been revoked 
  at <anonymous> 

通過(guò)觀察以上的結(jié)果，我們可知當(dāng) proxy 對(duì)象被撤銷(xiāo)之后，我們就沒(méi)有辦法對(duì)已撤銷(xiāo)的proxy 對(duì)象執(zhí)行任何操作。

六、Proxy 在開(kāi)源項(xiàng)目中的應(yīng)用

因?yàn)?Proxy 對(duì)象能夠提供強(qiáng)大的攔截能力，所以它被應(yīng)用在一些成熟的開(kāi)源項(xiàng)目中，用于實(shí)現(xiàn)響應(yīng)式的功能，比如 vue-next 和 observer-util 項(xiàng)目。對(duì)于 observer-util 這個(gè)項(xiàng)目，阿寶哥已經(jīng)寫(xiě)了一篇 從觀察者模式到響應(yīng)式的設(shè)計(jì)原理 的文章來(lái)介紹該項(xiàng)目，感興趣的小伙伴可以自行閱讀。

而對(duì)于 vue-next 項(xiàng)目來(lái)說(shuō)，響應(yīng)式的功能被封裝在 @vue/reactivity 模塊中，該模塊為我們提供了一個(gè) reactive 函數(shù)來(lái)創(chuàng)建響應(yīng)式對(duì)象。下面我們來(lái)簡(jiǎn)單了解一下 reactive函數(shù)的實(shí)現(xiàn)：

// packages/reactivity/src/reactive.ts 
export function reactive(target: object) { 
  if (target && (target as Target)[ReactiveFlags.IS_READONLY]) { 
    return target 
  } 
  return createReactiveObject( 
    target, 
    false, 
    mutableHandlers, 
    mutableCollectionHandlers 
  ) 
} 

在 reactive 函數(shù)內(nèi)部，會(huì)繼續(xù)調(diào)用 createReactiveObject 函數(shù)來(lái)創(chuàng)建響應(yīng)式對(duì)象，該函數(shù)也是被定義在 reactive.ts 文件中，該函數(shù)的的具體實(shí)現(xiàn)如下：

// packages/reactivity/src/reactive.ts 
function createReactiveObject( 
  target: Target, 
  isReadonly: boolean, 
  baseHandlers: ProxyHandler<any>, 
  collectionHandlers: ProxyHandler<any> 
) { 
  // 省略部分代碼   
  const proxyMap = isReadonly ? readonlyMap : reactiveMap 
  const existingProxy = proxyMap.get(target) 
  if (existingProxy) { 
    return existingProxy 
  } 
  const proxy = new Proxy( 
    target, 
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers 
  ) 
  proxyMap.set(target, proxy) 
  return proxy 
} 

在 createReactiveObject 函數(shù)內(nèi)部，我們終于見(jiàn)到了期待已久的 Proxy 對(duì)象。當(dāng) target 對(duì)象不是集合類(lèi)型的對(duì)象，比如 Map、Set、WeakMap 和 WeakSet 時(shí)，在創(chuàng)建 Proxy 對(duì)象時(shí)，使用的是 baseHandlers，該 handler 對(duì)象定義了以下 5 種捕獲器：

export const mutableHandlers: ProxyHandler<object> = { 
  get, 
  set, 
  deleteProperty, 
  has, 
  ownKeys 
} 

其中 get 和 set 捕獲器是分別用于收集 effect 函數(shù)和觸發(fā) effect 函數(shù)的執(zhí)行。好了，這里阿寶哥只是介紹一下 @vue/reactivity 中的 reactive 函數(shù)，關(guān)于該模塊是如何實(shí)現(xiàn)響應(yīng)式的細(xì)節(jié)，這里就不展開(kāi)介紹了，阿寶哥后續(xù)會(huì)單獨(dú)寫(xiě)一篇文章來(lái)詳細(xì)分析該模塊的功能。

七、參考資源MDN - Proxy

MDN - Reflect

exploringjs - proxies

stackoverflow - what-is-a-receiver-in-javascript