ES6 Proxy的學習與理解

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

摘要：是中添加的內置對象，和配合功能十分強大。理解根據的文檔，是對原對象的包裝?？梢园b的內容包括一系列等，值得注意的是同樣是一種可以攔截的操作。同時，對于未定義的操作保持原結果。

問題

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

理解

根據MDN的文檔，Proxy是對原對象的包裝。可以包裝的內容包括一系列get、set等，值得注意的是getPrototypeOf同樣是一種可以攔截的操作。同時，對于未定義的操作保持原結果。
在instanceof的頁面，可以看到如下示例

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

var o = new C();

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

那么，在上面那個問題中，既然未定義proxy的getPrototypeOf，那它就該與原對象保持一致。使用以下代碼進行驗證：

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

進一步思考

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

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

以及this的指向問題（案例來自阮一峰文章）

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

const proxy = new Proxy(target, handler);

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

雖然大部分情況下這應該不會成為大的障礙，但遇到錯誤的時候可以從這里入手尋找問題。

GPU云服務器云服務器深度學習與理解深度學習的理解深度學習理解如何理解深度學習

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/101747.html

ES6之Proxy學習

摘要：在中構造器的典型特點就是首字母大寫，我們通過原對象代理列表格式去創(chuàng)建對象創(chuàng)建的這個對象我們稱之為代理對象。就是原對象是當前的屬性名是代理對象。理解為明星的經理人消極怠工原封不動地轉告外界的信息給明星本身。但是要注意與是兩個不同的對象。 ES6之Proxy proxy的中文有代理的意思。在其他的程序設計語言中這個單詞也具有類似的含義。它是什么 Proxy是一個構造器。在js中構造器的典...

UnixAgain 2019-08-23 12:09 評論0 收藏0
【資源集合】 ES6 元編程（Proxy & Reflect & Symbol）

摘要：理解元編程和是屬于元編程范疇的，能介入的對象底層操作進行的過程中，并加以影響。元編程中的元的概念可以理解為程序本身。中，便是兩個可以用來進行元編程的特性。在之后，標準引入了，從而提供比較完善的元編程能力。導讀幾年前 ES6 剛出來的時候接觸過元編程（Metaprogramming）的概念，不過當時還沒有深究。今天在應用和學習中不斷接觸到這概念，比如 mobx 5 中就用到了 Pr...

aikin 2019-08-23 11:28 評論0 收藏0
JS每日一題：如何理解es6中的Proxy？

20190124問: 如何理解es6中的Proxy？試題解析:對proxy的理解，可能會延伸到vue的雙向綁定 Proxy（代理）定義可以理解為為目標對象架設一層攔截，外界對該對象的訪問，都必須通過這層攔截簡單示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...

tinysun1234 2019-08-23 14:58 評論0 收藏0
JS每日一題：如何理解es6中的Proxy？

20190124問: 如何理解es6中的Proxy？試題解析:對proxy的理解，可能會延伸到vue的雙向綁定 Proxy（代理）定義可以理解為為目標對象架設一層攔截，外界對該對象的訪問，都必須通過這層攔截簡單示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...

PumpkinDylan 2019-08-02 14:09 評論0 收藏0
理解Javascript的Proxy

摘要：關于在計算機領域是一個很普遍的概念，中文通常翻譯為代理，代理一般用于描述某人或某事代表他人行事。常見的概念有代理服務器反向代理代理模式等。所以至少可以起到兩方面的作用進行訪問控制和增加功能。理解了上面兩個問題，學習的就簡單多了。關于Proxy Proxy在計算機領域是一個很普遍的概念，中文通常翻譯為代理，代理一般用于描述某人或某事代表他人行事。常見的概念有Proxy Server（代...

adie 2019-08-23 11:41 評論0 收藏0