国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

理解Javascript的Proxy

adie / 1465人閱讀

摘要:關(guān)于在計(jì)算機(jī)領(lǐng)域是一個(gè)很普遍的概念,中文通常翻譯為代理,代理一般用于描述某人或某事代表他人行事。常見(jiàn)的概念有代理服務(wù)器反向代理代理模式等。所以至少可以起到兩方面的作用進(jìn)行訪問(wèn)控制和增加功能。理解了上面兩個(gè)問(wèn)題,學(xué)習(xí)的就簡(jiǎn)單多了。

關(guān)于Proxy

Proxy在計(jì)算機(jī)領(lǐng)域是一個(gè)很普遍的概念,中文通常翻譯為代理,“代理”一般用于描述某人或某事代表他人行事。常見(jiàn)的概念有Proxy Server(代理服務(wù)器)、Reverse Proxy(反向代理)、Proxy Pattern(代理模式)等。

為了理解Proxy,我們先問(wèn)自己幾個(gè)問(wèn)題:

什么是Proxy?

上面說(shuō)過(guò)了,代理就是某人或某事代表他人行事。

為什么需要Proxy?

有幾種可能,1. 被代理對(duì)象不想直接被訪問(wèn),就像找明星拍戲需要先聯(lián)系他的經(jīng)紀(jì)人;2. 被代理對(duì)象某些能力不足需要找個(gè)人幫他做,比如打官司需要找律師。所以Proxy至少可以起到兩方面的作用:進(jìn)行訪問(wèn)控制和增加功能。

理解了上面兩個(gè)問(wèn)題,學(xué)習(xí)Javascript的Proxy就簡(jiǎn)單多了。

ES6的Proxy

ES6中也出現(xiàn)了Proxy,和其他的Proxy類似,ES6中的Proxy也用于代理某個(gè)東西,同樣我們需要弄懂幾個(gè)問(wèn)題:

Proxy代理什么?

代理Object(這是廢話,javascript里面所有的東西都是Object)

Proxy代理Object做什么?

控制和修改Object的基本行為

哪些是Object的基本行為?

比如屬性調(diào)用、屬性賦值、刪除屬性、方法調(diào)用等

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

前面討論過(guò),進(jìn)行訪問(wèn)控制和增加功能

Proxy用法 基本語(yǔ)法

創(chuàng)建一個(gè)proxy:

const p = new Proxy(target, handler);

target:是被代理的對(duì)象,可以是對(duì)象、數(shù)組、方法、構(gòu)造函數(shù)class甚至是另外一個(gè)proxy,總之可以是任何JavaScript對(duì)象;

handler:一個(gè)對(duì)象,屬性是各種控制或修改target基本行為的方法;

示例

比如用戶未設(shè)置頭像則返回默認(rèn)頭像可以這么寫:

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···

或者我們可以實(shí)現(xiàn)alert換行顯示多條信息:

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

myAlert("haha", "lala");

React源碼中也有proxy的應(yīng)用,用proxy來(lái)統(tǒng)一管理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 */
  }
}

感謝大家閱讀,另外,在這邊幫朋友推一個(gè)愛(ài)心眾籌,希望大家能夠奉獻(xiàn)點(diǎn)愛(ài)心,朋友母親,身患直腸癌,目前在北京武警總醫(yī)院接收治療,可留言留下您的聯(lián)系方式,日后感激大家!

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/97320.html

相關(guān)文章

  • 【資源集合】 ES6 元編程(Proxy & Reflect & Symbol)

    摘要:理解元編程和是屬于元編程范疇的,能介入的對(duì)象底層操作進(jìn)行的過(guò)程中,并加以影響。元編程中的元的概念可以理解為程序本身。中,便是兩個(gè)可以用來(lái)進(jìn)行元編程的特性。在之后,標(biāo)準(zhǔn)引入了,從而提供比較完善的元編程能力。 導(dǎo)讀 幾年前 ES6 剛出來(lái)的時(shí)候接觸過(guò) 元編程(Metaprogramming)的概念,不過(guò)當(dāng)時(shí)還沒(méi)有深究。今天在應(yīng)用和學(xué)習(xí)中不斷接觸到這概念,比如 mobx 5 中就用到了 Pr...

    aikin 評(píng)論0 收藏0
  • Proxy可以做哪些有意思事兒

    摘要:拿來(lái)做些什么因?yàn)樵谑褂昧撕螅瑢?duì)象的行為基本上都是可控的,所以我們能拿來(lái)做一些之前實(shí)現(xiàn)起來(lái)比較復(fù)雜的事情。如果沒(méi)有使用關(guān)鍵字來(lái)調(diào)用的話,對(duì)象會(huì)直接拋出異常,而中的構(gòu)造函數(shù)指向則會(huì)變?yōu)檎{(diào)用函數(shù)時(shí)的作用域。 Proxy是什么 首先,我們要清楚,Proxy是什么意思,這個(gè)單詞翻譯過(guò)來(lái),就是 代理。 可以理解為,有一個(gè)很火的明星,開(kāi)通了一個(gè)微博賬號(hào),這個(gè)賬號(hào)非常活躍,回復(fù)粉絲、到處點(diǎn)贊之類的,...

    tabalt 評(píng)論0 收藏0
  • 《深入理解ES6》筆記——代理(Proxy)和反射(Reflection)API(12)

    摘要:方法與代理處理程序的方法相同。使用給目標(biāo)函數(shù)傳入指定的參數(shù)。當(dāng)然,不用反射也可以讀取的值。的例子我們可以理解成是攔截了方法,然后傳入?yún)?shù),將返回值賦值給,這樣我們就能在需要讀取這個(gè)返回值的時(shí)候調(diào)用。這種代理模式和的代理有異曲同工之妙。 反射 Reflect 當(dāng)你見(jiàn)到一個(gè)新的API,不明白的時(shí)候,就在瀏覽器打印出來(lái)看看它的樣子。 showImg(https://segmentfault....

    ZHAO_ 評(píng)論0 收藏0
  • 《深入理解ES6》筆記——代理(Proxy)和反射(Reflection)API(12)

    摘要:方法與代理處理程序的方法相同。使用給目標(biāo)函數(shù)傳入指定的參數(shù)。當(dāng)然,不用反射也可以讀取的值。的例子我們可以理解成是攔截了方法,然后傳入?yún)?shù),將返回值賦值給,這樣我們就能在需要讀取這個(gè)返回值的時(shí)候調(diào)用。這種代理模式和的代理有異曲同工之妙。 反射 Reflect 當(dāng)你見(jiàn)到一個(gè)新的API,不明白的時(shí)候,就在瀏覽器打印出來(lái)看看它的樣子。 showImg(https://segmentfault....

    shiina 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<