理解Javascript的Proxy

adie 發布于2019-08-23 11:41 / 1472人閱讀

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

關于Proxy

Proxy在計算機領域是一個很普遍的概念，中文通常翻譯為代理，“代理”一般用于描述某人或某事代表他人行事。常見的概念有Proxy Server（代理服務器）、Reverse Proxy（反向代理）、Proxy Pattern（代理模式）等。

為了理解Proxy，我們先問自己幾個問題：

什么是Proxy？

上面說過了，代理就是某人或某事代表他人行事。

為什么需要Proxy？

有幾種可能，1. 被代理對象不想直接被訪問，就像找明星拍戲需要先聯系他的經紀人；2. 被代理對象某些能力不足需要找個人幫他做，比如打官司需要找律師。所以Proxy至少可以起到兩方面的作用：進行訪問控制和增加功能。

理解了上面兩個問題，學習Javascript的Proxy就簡單多了。

ES6的Proxy

ES6中也出現了Proxy，和其他的Proxy類似，ES6中的Proxy也用于代理某個東西，同樣我們需要弄懂幾個問題：

Proxy代理什么？

代理Object（這是廢話，javascript里面所有的東西都是Object）

Proxy代理Object做什么？

控制和修改Object的基本行為

哪些是Object的基本行為？

比如屬性調用、屬性賦值、刪除屬性、方法調用等

為什么要控制和修改Object的基本行為？

前面討論過，進行訪問控制和增加功能

Proxy用法 基本語法

創建一個proxy：

const p = new Proxy(target, handler);

target：是被代理的對象，可以是對象、數組、方法、構造函數class甚至是另外一個proxy，總之可以是任何JavaScript對象;

handler：一個對象，屬性是各種控制或修改target基本行為的方法;

示例

比如用戶未設置頭像則返回默認頭像可以這么寫：

const user = { name: "bruce" };
const userProxy = new Proxy(user, {
  get: (obj, prop) => {
    if (prop === "avatar") {
      if (!obj.avatar) {
        return "https://avatar-static.segmentfault.com/100/035/1000355095-5b3c339ebdbe1_big64";
      }
    }
    return obj[prop];
  }
});

console.log(userProxy.avatar); // https://avatar-static···

或者我們可以實現alert換行顯示多條信息：

const myAlert = new Proxy(alert, {
  apply: (target, thisArg, argumentsList) => {
    const msg = argumentsList.join("
");
    target(msg);
  }
});

myAlert("haha", "lala");

React源碼中也有proxy的應用，用proxy來統一管理event：

/** Proxying after everything set on SyntheticEvent
 * to resolve Proxy issue on some WebKit browsers
 * in which some Event properties are set to undefined (GH#10010)
 */
{
  var isProxySupported = typeof Proxy === "function" &&
  // https://github.com/facebook/react/issues/12011
  !Object.isSealed(new Proxy({}, {}));

  if (isProxySupported) {
    /*eslint-disable no-func-assign */
    SyntheticEvent = new Proxy(SyntheticEvent, {
      construct: function (target, args) {
        return this.apply(target, Object.create(target.prototype), args);
      },
      apply: function (constructor, that, args) {
        return new Proxy(constructor.apply(that, args), {
          set: function (target, prop, value) {
            if (prop !== "isPersistent" && !target.constructor.Interface.hasOwnProperty(prop) && shouldBeReleasedProperties.indexOf(prop) === -1) {
              !(didWarnForAddedNewProperty || target.isPersistent()) ? warning_1(false, "This synthetic event is reused for performance reasons. If you"re " + "seeing this, you"re adding a new property in the synthetic event object. " + "The property is never released. See " + "https://fb.me/react-event-pooling for more information.") : void 0;
              didWarnForAddedNewProperty = true;
            }
            target[prop] = value;
            return true;
          }
        });
      }
    });
    /*eslint-enable no-func-assign */
  }
}

感謝大家閱讀，另外，在這邊幫朋友推一個愛心眾籌，希望大家能夠奉獻點愛心，朋友母親，身患直腸癌，目前在北京武警總醫院接收治療，可留言留下您的聯系方式，日后感激大家！

云服務器 GPU云服務器 javascript理解如何理解javascript 深入理解javascript 云計算的理解

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97320.html

【資源集合】 ES6 元編程（Proxy & Reflect & Symbol）

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

aikin 2019-08-23 11:28 評論0 收藏0
拿Proxy可以做哪些有意思的事兒

摘要：拿來做些什么因為在使用了后，對象的行為基本上都是可控的，所以我們能拿來做一些之前實現起來比較復雜的事情。如果沒有使用關鍵字來調用的話，對象會直接拋出異常，而中的構造函數指向則會變為調用函數時的作用域。 Proxy是什么首先，我們要清楚，Proxy是什么意思，這個單詞翻譯過來，就是代理。可以理解為，有一個很火的明星，開通了一個微博賬號，這個賬號非常活躍，回復粉絲、到處點贊之類的，...

tabalt 2019-08-22 17:30 評論0 收藏0
《深入理解ES6》筆記——代理（Proxy）和反射（Reflection）API（12）

摘要：方法與代理處理程序的方法相同。使用給目標函數傳入指定的參數。當然，不用反射也可以讀取的值。的例子我們可以理解成是攔截了方法，然后傳入參數，將返回值賦值給，這樣我們就能在需要讀取這個返回值的時候調用。這種代理模式和的代理有異曲同工之妙。反射 Reflect 當你見到一個新的API，不明白的時候，就在瀏覽器打印出來看看它的樣子。 showImg(https://segmentfault....

ZHAO_ 2019-08-21 16:06 評論0 收藏0
《深入理解ES6》筆記——代理（Proxy）和反射（Reflection）API（12）

摘要：方法與代理處理程序的方法相同。使用給目標函數傳入指定的參數。當然，不用反射也可以讀取的值。的例子我們可以理解成是攔截了方法，然后傳入參數，將返回值賦值給，這樣我們就能在需要讀取這個返回值的時候調用。這種代理模式和的代理有異曲同工之妙。反射 Reflect 當你見到一個新的API，不明白的時候，就在瀏覽器打印出來看看它的樣子。 showImg(https://segmentfault....

shiina 2019-08-29 13:05 評論0 收藏0