成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

《深入理解ES6》筆記——代理（Proxy）和反射（Reflection）API（12）

shiina / 1814人閱讀

摘要：方法與代理處理程序的方法相同。使用給目標(biāo)函數(shù)傳入指定的參數(shù)。當(dāng)然，不用反射也可以讀取的值。的例子我們可以理解成是攔截了方法，然后傳入?yún)?shù)，將返回值賦值給，這樣我們就能在需要讀取這個(gè)返回值的時(shí)候調(diào)用。這種代理模式和的代理有異曲同工之妙。

反射 Reflect

當(dāng)你見(jiàn)到一個(gè)新的API，不明白的時(shí)候，就在瀏覽器打印出來(lái)看看它的樣子。

反射的概念

Reflect 是一個(gè)內(nèi)置的對(duì)象，它提供可攔截JavaScript操作的方法。方法與代理處理程序的方法相同。Reflect 不是一個(gè)函數(shù)對(duì)象，因此它是不可構(gòu)造的。

    new Reflect() //錯(cuò)誤的寫(xiě)法
反射的使用

Reflect提供了一些靜態(tài)方法，靜態(tài)方法是指只能通過(guò)對(duì)象自身訪問(wèn)的的方法，這個(gè)知識(shí)在前面幾章講解過(guò)。所有方法的詳細(xì)解析，前往 Reflect詳解 查看。

靜態(tài)方法列表：這么多靜態(tài)方法，你需要學(xué)會(huì)的是如何使用它們。

1、Reflect.apply()
2、Reflect.construct()
3、Reflect.defineProperty()
4、Reflect.deleteProperty()
5、Reflect.enumerate()
6、Reflect.get()
7、Reflect.getOwnPropertyDescriptor()
8、Reflect.getPrototypeOf()
9、Reflect.has()
10、Reflect.isExtensible()
11、Reflect.ownKeys()
12、Reflect.preventExtensions()
13、Reflect.set()
14、Reflect.setPrototypeOf()

靜態(tài)方法的使用：

demo1：使用Reflect.get()獲取目標(biāo)對(duì)象指定key的value。

let obj = {
    a: 1
};

let s1 = Reflect.get(obj, "a")
console.log(s1) // 1

demo2:使用Reflect.apply給目標(biāo)函數(shù)floor傳入指定的參數(shù)。

const s2 = Reflect.apply(Math.floor, undefined, [1.75]); 
console.log(s2) // 1
進(jìn)一步理解Reflect

看了上面的例子和方法，我們知道Reflect可以攔截JavaScript代碼，包括攔截對(duì)象，攔截函數(shù)等，然后對(duì)攔截到的對(duì)象或者函數(shù)進(jìn)行讀寫(xiě)等操作。

比如demo1的get()方法，攔截obj對(duì)象，然后讀取key為a的值。當(dāng)然，不用反射也可以讀取a的值。

再看demo2的apply()方法，這個(gè)方法你應(yīng)該比較了解了，和數(shù)組中使用apply不同的是，Reflect.apply()提供了3個(gè)參數(shù)，第一個(gè)參數(shù)是反射的函數(shù)，后面2個(gè)參數(shù)才是和數(shù)組的apply一致。demo2的例子我們可以理解成是攔截了Math.floor方法，然后傳入?yún)?shù)，將返回值賦值給s2，這樣我們就能在需要讀取這個(gè)返回值的時(shí)候調(diào)用s2。

//數(shù)組使用apply
const arr = [1, 2, 3]
function a() {
  return Array.concat.apply(null, arguments)
}
const s = a(arr)
console.log(s) // [1, 2 ,3]

其實(shí)Reflect的作用和我們下面要講的Proxy是差不多的。

代理 Proxy

Proxy這個(gè)詞相信你已經(jīng)聽(tīng)過(guò)無(wú)數(shù)遍了，我曾經(jīng)寫(xiě)過(guò)一篇webpack使用代理來(lái)攔截指定域的API請(qǐng)求，轉(zhuǎn)發(fā)到新的目標(biāo)URL的文章 webpack中使用proxy。但是注意Proxy和proxy，大小寫(xiě)字母之間是不同的。本章講的是大寫(xiě)字母開(kāi)頭的Proxy。

語(yǔ)法 
let p = new Proxy(target, handler);

target：一個(gè)目標(biāo)對(duì)象(可以是任何類型的對(duì)象，包括本機(jī)數(shù)組，函數(shù)，甚至另一個(gè)代理)用Proxy來(lái)包裝。
handler：一個(gè)對(duì)象，其屬性是當(dāng)執(zhí)行一個(gè)操作時(shí)定義代理的行為的函數(shù)。

代理的使用

基礎(chǔ)demo：Proxy的demo有很多，我們只分析基礎(chǔ)demo，主要看new Proxy({}, handler)的操作，指定目標(biāo)obj對(duì)象，然后handler對(duì)象執(zhí)行g(shù)et()操作，get()返回值的判斷是，如果name是target目標(biāo)對(duì)象的屬性，則返回target[name]的值，否則返回37，最后測(cè)試的時(shí)候，p.a是對(duì)象p的key，所以返回a的value，而p.b不存在，返回37。

const obj = {
  a: 10
}
let handler = {
    get: function(target, name){
        console.log("test: ", target, name)
        // test:  {"a":10} a
        // test:  {"a":10} b
        return name in target ? target[name] : 37
    }
}
let p = new Proxy(obj, handler)
console.log(p.a, p.b) // 10 37

這個(gè)例子的作用是攔截目標(biāo)對(duì)象obj，當(dāng)執(zhí)行obj的讀寫(xiě)操作時(shí)，進(jìn)入handler函數(shù)進(jìn)行判斷，如果讀取的key不存在，則返回默認(rèn)值。

我們使用一些http-proxy插件或者webpack的時(shí)候，有時(shí)候需要訪問(wèn)某個(gè)api時(shí)，跳轉(zhuǎn)到指定的url，這種方式也能解決跨域訪問(wèn)。這種代理模式和Proxy的代理有異曲同工之妙。但是，別混為一體了。

module.exports = {
    devServer: {
       proxy: [
           {
                context: "/api/*", //代理API
                target: "https://www.hyy.com", //目標(biāo)URL
                secure: false
          }
       ]
    }
}
總結(jié)

無(wú)論是反射還是代理，除了他們使用方法不同之外，他們所作的事情非常相似，都可以理解成攔截某個(gè)東西，然后執(zhí)行某個(gè)函數(shù)操作，再返回函數(shù)操作的結(jié)果。

大部分前端在日常業(yè)務(wù)需求中，幾乎很少使用到這2個(gè)API，實(shí)際使用場(chǎng)景還得在以后的開(kāi)發(fā)中慢慢挖掘。

=> 返回文章目錄

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112352.html

相關(guān)文章

  • 《深入理解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）

    摘要：是陷阱函數(shù)對(duì)應(yīng)的反射方法，同時(shí)也是操作的默認(rèn)行為。對(duì)象外形指的是對(duì)象已有的屬性與方法的集合，由于該屬性驗(yàn)證只須在讀取屬性時(shí)被觸發(fā)，因此只要使用陷阱函數(shù)。無(wú)論該屬性是對(duì)象自身的屬性還是其原型的屬性。 主要知識(shí)點(diǎn)：代理和反射的定義、常用的陷阱函數(shù)、可被撤銷(xiāo)的代理、將代理對(duì)象作為原型使用、將代理作為類的原型showImg(https://segmentfault.com/img/bVbfWr...

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

  • ES6中的代理（Proxy）和反射（Reflection）

    摘要：代理和反射的定義調(diào)用可常見(jiàn)代替其它目標(biāo)對(duì)象的代理，它虛擬化了目標(biāo)，所以二者看起來(lái)功能一致。代理可攔截引擎內(nèi)部目標(biāo)的底層對(duì)象操作，這些底層操作被攔截后會(huì)觸發(fā)響應(yīng)特定操作的陷阱函數(shù)。 代理和反射的定義 調(diào)用 new Proxy() 可常見(jiàn)代替其它目標(biāo) (target) 對(duì)象的代理，它虛擬化了目標(biāo)，所以二者看起來(lái)功能一致。 代理可攔截JS引擎內(nèi)部目標(biāo)的底層對(duì)象操作，這些底層操作被攔截后會(huì)觸發(fā)...

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

  • 《深入理解ES6》筆記——導(dǎo)讀

    摘要：最近買(mǎi)了深入理解的書(shū)籍來(lái)看，為什么學(xué)習(xí)這么久還要買(mǎi)這本書(shū)呢主要是看到核心團(tuán)隊(duì)成員及的創(chuàng)造者為本書(shū)做了序，作為一個(gè)粉絲，還是挺看好這本書(shū)能給我?guī)?lái)一個(gè)新的升華，而且本書(shū)的作者也非常厲害。 使用ES6開(kāi)發(fā)已經(jīng)有1年多了，以前看的是阮一峰老師的ES6教程，也看過(guò)MDN文檔的ES6語(yǔ)法介紹。 最近買(mǎi)了《深入理解ES6》的書(shū)籍來(lái)看，為什么學(xué)習(xí)ES6這么久還要買(mǎi)這本書(shū)呢？主要是看到Daniel A...

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

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

0條評(píng)論

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