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

資訊專欄INFORMATION COLUMN

JS每日一題：如何理解es6中的Proxy？

tinysun1234 / 595人閱讀

20190124問(wèn):

如何理解es6中的Proxy？

試題解析:對(duì)proxy的理解，可能會(huì)延伸到vue的雙向綁定
Proxy（代理） 定義

可以理解為為目標(biāo)對(duì)象架設(shè)一層攔截，外界對(duì)該對(duì)象的訪問(wèn)，都必須通過(guò)這層攔截

簡(jiǎn)單示例:

 const obj = new Proxy({}, {
     get: (target, key, receiver) => {
         return "JS"
         console.log(`get ${key}`)
     },
     set: (target, key, value, receiver) => {
         console.log(`set ${key}`)
     },
 })
 
 obj.name = "JS 每日一題" 
 // set name
 // JS 每日一題
 
 obj.name 
 // 這里進(jìn)入get的回調(diào)函數(shù)，所有直接返回 JS

從上面的示例中可以看出，Proxy存在一種機(jī)制，可以對(duì)外界的讀寫操作進(jìn)行改寫

Proxy 實(shí)例方法

proxy除了代理get,set操作，還能代理其它的操作，如下

handler.getPrototypeOf()

// 在讀取代理對(duì)象的原型時(shí)觸發(fā)該操作，比如在執(zhí)行 Object.getPrototypeOf(proxy) 時(shí)。

handler.setPrototypeOf()

// 在設(shè)置代理對(duì)象的原型時(shí)觸發(fā)該操作，比如在執(zhí)行 Object.setPrototypeOf(proxy, null) 時(shí)。

handler.isExtensible()

// 在判斷一個(gè)代理對(duì)象是否是可擴(kuò)展時(shí)觸發(fā)該操作，比如在執(zhí)行 Object.isExtensible(proxy) 時(shí)。

handler.preventExtensions()

// 在讓一個(gè)代理對(duì)象不可擴(kuò)展時(shí)觸發(fā)該操作，比如在執(zhí)行 Object.preventExtensions(proxy) 時(shí)。

handler.getOwnPropertyDescriptor()

// 在獲取代理對(duì)象某個(gè)屬性的屬性描述時(shí)觸發(fā)該操作，比如在執(zhí)行 Object.getOwnPropertyDescriptor(proxy, "foo") 時(shí)。

handler.defineProperty()

// 在定義代理對(duì)象某個(gè)屬性時(shí)的屬性描述時(shí)觸發(fā)該操作，比如在執(zhí)行 Object.defineProperty(proxy, "foo", {}) 時(shí)。

handler.has()

// 在判斷代理對(duì)象是否擁有某個(gè)屬性時(shí)觸發(fā)該操作，比如在執(zhí)行 "foo" in proxy 時(shí)。

handler.get()

// 在讀取代理對(duì)象的某個(gè)屬性時(shí)觸發(fā)該操作，比如在執(zhí)行 proxy.foo 時(shí)。

handler.set()

// 在給代理對(duì)象的某個(gè)屬性賦值時(shí)觸發(fā)該操作，比如在執(zhí)行 proxy.foo = 1 時(shí)。

handler.deleteProperty()

// 在刪除代理對(duì)象的某個(gè)屬性時(shí)觸發(fā)該操作，比如在執(zhí)行 delete proxy.foo 時(shí)。

handler.ownKeys()

// 在獲取代理對(duì)象的所有屬性鍵時(shí)觸發(fā)該操作，比如在執(zhí)行 Object.getOwnPropertyNames(proxy) 時(shí)。

handler.apply()

// 在調(diào)用一個(gè)目標(biāo)對(duì)象為函數(shù)的代理對(duì)象時(shí)觸發(fā)該操作，比如在執(zhí)行 proxy() 時(shí)。

handler.construct()

// 在給一個(gè)目標(biāo)對(duì)象為構(gòu)造函數(shù)的代理對(duì)象構(gòu)造實(shí)例時(shí)觸發(fā)該操作，比如在執(zhí)行new proxy() 時(shí)。
為什么要使用Proxy

攔截和監(jiān)視外部對(duì)對(duì)象的訪問(wèn)

降低函數(shù)或類的復(fù)雜度

在復(fù)雜操作前對(duì)操作進(jìn)行校驗(yàn)或?qū)λ栀Y源進(jìn)行管理

題外思考

如何用proxy實(shí)現(xiàn)雙向綁定?

往期

JS每日一題: 前端的緩存有哪些？都適用什么場(chǎng)景？區(qū)別是什么？
JS每日一題: Call，Apply，Bind的使用與區(qū)別，如何實(shí)現(xiàn)一個(gè)bind？
JS每日一題: 說(shuō)說(shuō)你對(duì)前端模塊化的理解
JS每日一題: web安全攻擊手段有哪些？以及如何防范

關(guān)于JS每日一題

JS每日一題可以看成是一個(gè)語(yǔ)音答題社區(qū)
每天利用碎片時(shí)間采用60秒內(nèi)的語(yǔ)音形式來(lái)完成當(dāng)天的考題
群主在次日0點(diǎn)推送當(dāng)天的參考答案

注 絕不僅限于完成當(dāng)天任務(wù)，更多是查漏補(bǔ)缺，學(xué)習(xí)群內(nèi)其它同學(xué)優(yōu)秀的答題思路

點(diǎn)擊加入答題

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

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

相關(guān)文章

  • JS每日一題：如何理解es6中的Proxy？

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

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

  • 前端知識(shí)點(diǎn)(二)

    摘要：在給一個(gè)目標(biāo)對(duì)象為構(gòu)造函數(shù)的代理對(duì)象構(gòu)造實(shí)例時(shí)觸發(fā)該操作，比如在執(zhí)行時(shí)。 1、元素上下垂直居中的方式有哪些？ 元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案 行內(nèi)元素line-height方案 flex 彈性布局方案 transform 未知元素寬高解決方案 absolute加mar...

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

  • 前端知識(shí)點(diǎn)(二)

    摘要：在給一個(gè)目標(biāo)對(duì)象為構(gòu)造函數(shù)的代理對(duì)象構(gòu)造實(shí)例時(shí)觸發(fā)該操作，比如在執(zhí)行時(shí)。 1、元素上下垂直居中的方式有哪些？ 元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案 行內(nèi)元素line-height方案 flex 彈性布局方案 transform 未知元素寬高解決方案 absolute加mar...

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

  • 前端知識(shí)點(diǎn)(二)

    摘要：在給一個(gè)目標(biāo)對(duì)象為構(gòu)造函數(shù)的代理對(duì)象構(gòu)造實(shí)例時(shí)觸發(fā)該操作，比如在執(zhí)行時(shí)。 1、元素上下垂直居中的方式有哪些？ 元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案 行內(nèi)元素line-height方案 flex 彈性布局方案 transform 未知元素寬高解決方案 absolute加mar...

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

  • JS每日一題:Es6中新增的數(shù)據(jù)類型有哪些？使用場(chǎng)景？

    摘要：?jiǎn)栔行略龅臄?shù)據(jù)類型有哪些使用場(chǎng)景中新增一種原始數(shù)據(jù)類型最大的特點(diǎn)是唯一性，值通過(guò)函數(shù)生成在中對(duì)象的屬性都是字符串，我們使用他人定義的對(duì)象，然后去新增自己的屬性，這樣容易起沖突覆蓋原有的屬性也可以看成為一個(gè)字符串，不過(guò)這個(gè)字符能保證是獨(dú)一無(wú)二 20190125問(wèn): Es6中新增的數(shù)據(jù)類型有哪些？使用場(chǎng)景？ es6中新增一種原始數(shù)據(jù)類型Symbol,最大的特點(diǎn)是唯一性，Symbol值通過(guò)S...

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

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

0條評(píng)論

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