js中Proxy一定要配合Reflect使用的原因是什么

這篇文章主要介紹“js中Proxy一定要配合Reflect使用的原因是什么”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“js中Proxy一定要配合Reflect使用的原因是什么”文章能幫助大家解決問(wèn)題。

前置知識(shí)

• Proxy 代理，它內(nèi)置了一系列”陷阱“用于創(chuàng)建一個(gè)對(duì)象的代理，從而實(shí)現(xiàn)基本操作的攔截和自定義（如屬性查找、賦值、枚舉、函數(shù)調(diào)用等）。

• Reflect 反射，它提供攔截 JavaScript 操作的方法。這些方法與 Proxy 的方法相同。

簡(jiǎn)單來(lái)說(shuō)，我們可以通過(guò) Proxy 創(chuàng)建對(duì)于原始對(duì)象的代理對(duì)象，從而在代理對(duì)象中使用 Reflect 達(dá)到對(duì)于 JavaScript 原始操作的攔截。

如果你還不了解 & ，那么趕快去 MDN 上去補(bǔ)習(xí)他們的知識(shí)吧。

畢竟大名鼎鼎的 VueJs/Core 中核心的響應(yīng)式模塊就是基于這兩個(gè) Api 來(lái)實(shí)現(xiàn)的。

單獨(dú)使用 Proxy

開(kāi)始的第一個(gè)例子，我們先單獨(dú)使用 Proxy 來(lái)烹飪一道簡(jiǎn)單的開(kāi)胃小菜：

const obj = {
  name: 'wang.haoyu',
};

const proxy = new Proxy(obj, {
  // get陷阱中target表示原對(duì)象 key表示訪問(wèn)的屬性名
  get(target, key) {
    console.log('劫持你的數(shù)據(jù)訪問(wèn)' + key);
    return target[key]
  },
});

proxy.name // 劫持你的數(shù)據(jù)訪問(wèn)name -> wang.haoyu

看起來(lái)很簡(jiǎn)單對(duì)吧，我們通過(guò) Proxy 創(chuàng)建了一個(gè)基于 obj 對(duì)象的代理，同時(shí)在 Proxy 中聲明了一個(gè) get 陷阱。

當(dāng)訪問(wèn)我們?cè)L問(wèn) proxy.name 時(shí)實(shí)際觸發(fā)了對(duì)應(yīng)的 get 陷阱，它會(huì)執(zhí)行 get 陷阱中的邏輯，同時(shí)會(huì)執(zhí)行對(duì)應(yīng)陷阱中的邏輯，最終返回對(duì)應(yīng)的 target[key] 也就是所謂的 wang.haoyu .

Proxy 中的 receiver

上邊的 Demo 中一切都看起來(lái)順風(fēng)順?biāo)疀](méi)錯(cuò)吧，細(xì)心的同學(xué)在閱讀 Proxy 的 MDN 文檔上可能會(huì)發(fā)現(xiàn)其實(shí) Proxy 中 get 陷阱中還會(huì)存在一個(gè)額外的參數(shù) receiver 。

那么這里的 receiver 究竟表示什么意思呢？大多數(shù)同學(xué)會(huì)將它理解成為代理對(duì)象，但這是不全面的。

接下來(lái)同樣讓我們以一個(gè)簡(jiǎn)單的例子來(lái)作為切入點(diǎn)：

const obj = {
  name: 'wang.haoyu',
};

const proxy = new Proxy(obj, {
  // get陷阱中target表示原對(duì)象 key表示訪問(wèn)的屬性名
  get(target, key, receiver) {
    console.log(receiver === proxy);
    return target[key];
  },
});

// log: true
proxy.name;

上述的例子中，我們?cè)?Proxy 實(shí)例對(duì)象的 get 陷阱上接收了 receiver 這個(gè)參數(shù)。

同時(shí)，我們?cè)谙葳鍍?nèi)部打印 console.log(receiver === proxy); 它會(huì)打印出 true ，表示這里 receiver 的確是和代理對(duì)象相等的。

所以 receiver 的確是可以表示代理對(duì)象，但是這僅僅是 receiver 代表的一種情況而已。

接下來(lái)我們來(lái)看另外一個(gè)例子：

const parent = {
  get value() {
    return '19Qingfeng';
  },
};

const proxy = new Proxy(parent, {
  // get陷阱中target表示原對(duì)象 key表示訪問(wèn)的屬性名
  get(target, key, receiver) {
    console.log(receiver === proxy);
    return target[key];
  },
});

const obj = {
  name: 'wang.haoyu',
};

// 設(shè)置obj繼承與parent的代理對(duì)象proxy
Object.setPrototypeOf(obj, proxy);

// log: false
obj.value

關(guān)于原型上出現(xiàn)的 get/set 屬性訪問(wèn)器的“屏蔽”效果，我在這篇文章中進(jìn)行了詳細(xì)闡述。這里我就不展開(kāi)講解了。

我們可以看到，上述的代碼同樣我在 proxy 對(duì)象的 get 陷阱上打印了 console.log(receiver === proxy); 結(jié)果卻是 false 。

那么你可以稍微思考下這里的 receiver 究竟是什么呢？ 其實(shí)這也是 proxy 中 get 陷阱第三個(gè) receiver 存在的意義。

它是為了傳遞正確的調(diào)用者指向，你可以看看下方的代碼：

...
const proxy = new Proxy(parent, {
  // get陷阱中target表示原對(duì)象 key表示訪問(wèn)的屬性名
  get(target, key, receiver) {
-   console.log(receiver === proxy) // log:false
+   console.log(receiver === obj) // log:true
    return target[key];
  },
});
...

其實(shí)簡(jiǎn)單來(lái)說(shuō)，get 陷阱中的 receiver 存在的意義就是為了正確的在陷阱中傳遞上下文。

涉及到屬性訪問(wèn)時(shí)，不要忘記 get 陷阱還會(huì)觸發(fā)對(duì)應(yīng)的屬性訪問(wèn)器，也就是所謂的 get 訪問(wèn)器方法。

我們可以清楚的看到上述的 receiver 代表的是繼承與 Proxy 的對(duì)象，也就是 obj。

看到這里，我們明白了 Proxy 中 get 陷阱的 receiver 不僅僅代表的是 Proxy 代理對(duì)象本身，同時(shí)也許他會(huì)代表繼承 Proxy 的那個(gè)對(duì)象。

其實(shí)本質(zhì)上來(lái)說(shuō)它還是為了確保陷阱函數(shù)中調(diào)用者的正確的上下文訪問(wèn)，比如這里的 receiver 指向的是 obj 。

當(dāng)然，你不要將 revceiver 和 get 陷阱中的 this 弄混了，陷阱中的 this 關(guān)鍵字表示的是代理的 handler 對(duì)象。

比如：

const parent = {
  get value() {
    return '19Qingfeng';
  },
};

const handler = {
  get(target, key, receiver) {
    console.log(this === handler); // log: true
    console.log(receiver === obj); // log: true
    return target[key];
  },
};

const proxy = new Proxy(parent, handler);

const obj = {
  name: 'wang.haoyu',
};

// 設(shè)置obj繼承與parent的代理對(duì)象proxy
Object.setPrototypeOf(obj, proxy);

// log: false
obj.value

Reflect 中的 receiver

在清楚了 Proxy 中 get 陷阱的 receiver 后，趁熱打鐵我們來(lái)聊聊 Reflect 反射 API 中 get 陷阱的 receiver。

我們知道在 Proxy 中（以下我們都以 get 陷阱為例）第三個(gè)參數(shù) receiver 代表的是代理對(duì)象本身或者繼承與代理對(duì)象的對(duì)象，它表示觸發(fā)陷阱時(shí)正確的上下文。

const parent = {
  name: '19Qingfeng',
  get value() {
    return this.name;
  },
};

const handler = {
  get(target, key, receiver) {
    return Reflect.get(target, key);
    // 這里相當(dāng)于 return target[key]
  },
};

const proxy = new Proxy(parent, handler);

const obj = {
  name: 'wang.haoyu',
};

// 設(shè)置obj繼承與parent的代理對(duì)象proxy
Object.setPrototypeOf(obj, proxy);

// log: false
console.log(obj.value);

我們稍微分析下上邊的代碼：

• 當(dāng)我們調(diào)用 obj.value 時(shí)，由于 obj 本身不存在 value 屬性。

• 它繼承的 proxy 對(duì)象中存在 value 的屬性訪問(wèn)操作符，所以會(huì)發(fā)生屏蔽效果。

• 此時(shí)會(huì)觸發(fā) proxy 上的 get value() 屬性訪問(wèn)操作。

• 同時(shí)由于訪問(wèn)了 proxy 上的 value 屬性訪問(wèn)器，所以此時(shí)會(huì)觸發(fā) get 陷阱。

• 進(jìn)入陷阱時(shí)，target 為源對(duì)象也就是 parent ，key 為 value 。

• 陷阱中返回 Reflect.get(target,key) 相當(dāng)于 target[key]。

• 此時(shí)，不知不覺(jué)中 this 指向在 get 陷阱中被偷偷修改掉了！！

• 原本調(diào)用方的 obj 在陷阱中被修改成為了對(duì)應(yīng)的 target 也就是 parent 。

• 自然而然打印出了對(duì)應(yīng)的 parent[value] 也就是 19Qingfeng 。

這顯然不是我們期望的結(jié)果，當(dāng)我訪問(wèn) obj.value 時(shí)，我希望應(yīng)該正確輸出對(duì)應(yīng)的自身上的 name 屬性也就是所謂的 obj.value => wang.haoyu 。

那么，Relfect 中 get 陷阱的 receiver 就大顯神通了。

const parent = {
  name: '19Qingfeng',
  get value() {
    return this.name;
  },
};

const handler = {
  get(target, key, receiver) {
-   return Reflect.get(target, key);
+   return Reflect.get(target, key, receiver);
  },
};

const proxy = new Proxy(parent, handler);

const obj = {
  name: 'wang.haoyu',
};

// 設(shè)置obj繼承與parent的代理對(duì)象proxy
Object.setPrototypeOf(obj, proxy);

// log: wang.haoyu
console.log(obj.value);

上述代碼原理其實(shí)非常簡(jiǎn)單：

• 首先，之前我們提到過(guò)在 Proxy 中 get 陷阱的 receiver 不僅僅會(huì)表示代理對(duì)象本身同時(shí)也還有可能表示繼承于代理對(duì)象的對(duì)象，具體需要區(qū)別與調(diào)用方。這里顯然它是指向繼承與代理對(duì)象的 obj 。

• 其次，我們?cè)?Reflect 中 get 陷阱中第三個(gè)參數(shù)傳遞了 Proxy 中的 receiver 也就是 obj 作為形參，它會(huì)修改調(diào)用時(shí)的 this 指向。

你可以簡(jiǎn)單的將 Reflect.get(target, key, receiver) 理解成為 target[key].call(receiver)，不過(guò)這是一段偽代碼，但是這樣你可能更好理解。

相信看到這里你已經(jīng)明白 Relfect 中的 receiver 代表的含義是什么了，沒(méi)錯(cuò)它正是可以修改屬性訪問(wèn)中的 this 指向?yàn)閭魅氲?receiver 對(duì)象。

關(guān)于“js中Proxy一定要配合Reflect使用的原因是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。