ES6 Proxy的學(xué)習(xí)與理解

LinkedME2016 發(fā)布于2019-08-23 15:15 / 1637人閱讀

摘要：是中添加的內(nèi)置對(duì)象，和配合功能十分強(qiáng)大。理解根據(jù)的文檔，是對(duì)原對(duì)象的包裝。可以包裝的內(nèi)容包括一系列等，值得注意的是同樣是一種可以攔截的操作。同時(shí)，對(duì)于未定義的操作保持原結(jié)果。

問(wèn)題

前一段時(shí)間在字節(jié)跳動(dòng)時(shí)聊到了Proxy。起因是問(wèn)道Vue中數(shù)據(jù)綁定的實(shí)現(xiàn)，回答通過(guò)設(shè)置setter和getter實(shí)現(xiàn)，問(wèn)這樣有什么缺點(diǎn)，答在對(duì)對(duì)象的屬性的監(jiān)控方面存在瑕疵，例如通過(guò)直接設(shè)置數(shù)組下標(biāo)進(jìn)行賦值，或者對(duì)對(duì)象直接進(jìn)行修改，是無(wú)法觀察到的，必須使用Vue.set添加，或者使用Array.prototype.push等方法。
面試官介紹說(shuō)在Vue3中已經(jīng)通過(guò)Proxy解決了這個(gè)問(wèn)題。Proxy是ES6中添加的內(nèi)置對(duì)象，和Reflect配合功能十分強(qiáng)大。正好今天看到一個(gè)問(wèn)題。

理解

根據(jù)MDN的文檔，Proxy是對(duì)原對(duì)象的包裝。可以包裝的內(nèi)容包括一系列g(shù)et、set等，值得注意的是getPrototypeOf同樣是一種可以攔截的操作。同時(shí)，對(duì)于未定義的操作保持原結(jié)果。
在instanceof的頁(yè)面，可以看到如下示例

function C() {}
function D() {}

var o = new C();

// true, because: Object.getPrototypeOf(o) === C.prototype
o instanceof C;

那么，在上面那個(gè)問(wèn)題中，既然未定義proxy的getPrototypeOf，那它就該與原對(duì)象保持一致。使用以下代碼進(jìn)行驗(yàn)證：

Object.getPrototypeOf(proxy) === Array.prototype //true

進(jìn)一步思考

那么，是不是對(duì)于一切行為，在不做任何攔截的情況下，就能保證與目標(biāo)對(duì)象的行為完全一致呢？很顯然，這是不可能的。例如

a = {}
b = new Proxy(a, {})
console.log(a === b) //false

以及this的指向問(wèn)題（案例來(lái)自阮一峰文章）

const target = {
  m: function () {
    console.log(this === proxy);
  }
};
const handler = {};

const proxy = new Proxy(target, handler);

target.m() // false
proxy.m()  // true

雖然大部分情況下這應(yīng)該不會(huì)成為大的障礙，但遇到錯(cuò)誤的時(shí)候可以從這里入手尋找問(wèn)題。