資訊專欄INFORMATION COLUMN
20190124問:
如何理解es6中的Proxy？
試題解析:對proxy的理解，可能會延伸到vue的雙向綁定Proxy（代理） 定義
可以理解為為目標對象架設(shè)一層攔截，外界對該對象的訪問，都必須通過這層攔截
簡單示例:
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
// 這里進入get的回調(diào)函數(shù)，所有直接返回 JS
從上面的示例中可以看出，Proxy存在一種機制，可以對外界的讀寫操作進行改寫
Proxy 實例方法proxy除了代理get,set操作，還能代理其它的操作，如下
handler.getPrototypeOf()
// 在讀取代理對象的原型時觸發(fā)該操作，比如在執(zhí)行 Object.getPrototypeOf(proxy) 時。
handler.setPrototypeOf()
// 在設(shè)置代理對象的原型時觸發(fā)該操作，比如在執(zhí)行 Object.setPrototypeOf(proxy, null) 時。
handler.isExtensible()
// 在判斷一個代理對象是否是可擴展時觸發(fā)該操作，比如在執(zhí)行 Object.isExtensible(proxy) 時。
handler.preventExtensions()
// 在讓一個代理對象不可擴展時觸發(fā)該操作，比如在執(zhí)行 Object.preventExtensions(proxy) 時。
handler.getOwnPropertyDescriptor()
// 在獲取代理對象某個屬性的屬性描述時觸發(fā)該操作，比如在執(zhí)行 Object.getOwnPropertyDescriptor(proxy, "foo") 時。
handler.defineProperty()
// 在定義代理對象某個屬性時的屬性描述時觸發(fā)該操作，比如在執(zhí)行 Object.defineProperty(proxy, "foo", {}) 時。
handler.has()
// 在判斷代理對象是否擁有某個屬性時觸發(fā)該操作，比如在執(zhí)行 "foo" in proxy 時。
handler.get()
// 在讀取代理對象的某個屬性時觸發(fā)該操作，比如在執(zhí)行 proxy.foo 時。
handler.set()
// 在給代理對象的某個屬性賦值時觸發(fā)該操作，比如在執(zhí)行 proxy.foo = 1 時。
handler.deleteProperty()
// 在刪除代理對象的某個屬性時觸發(fā)該操作，比如在執(zhí)行 delete proxy.foo 時。
handler.ownKeys()
// 在獲取代理對象的所有屬性鍵時觸發(fā)該操作，比如在執(zhí)行 Object.getOwnPropertyNames(proxy) 時。
handler.apply()
// 在調(diào)用一個目標對象為函數(shù)的代理對象時觸發(fā)該操作，比如在執(zhí)行 proxy() 時。
handler.construct()
// 在給一個目標對象為構(gòu)造函數(shù)的代理對象構(gòu)造實例時觸發(fā)該操作，比如在執(zhí)行new proxy() 時。
為什么要使用Proxy
攔截和監(jiān)視外部對對象的訪問
降低函數(shù)或類的復雜度
在復雜操作前對操作進行校驗或?qū)λ栀Y源進行管理
題外思考如何用proxy實現(xiàn)雙向綁定?
往期JS每日一題: 前端的緩存有哪些？都適用什么場景？區(qū)別是什么？
JS每日一題: Call，Apply，Bind的使用與區(qū)別，如何實現(xiàn)一個bind？
JS每日一題: 說說你對前端模塊化的理解
JS每日一題: web安全攻擊手段有哪些？以及如何防范
JS每日一題可以看成是一個語音答題社區(qū)
每天利用碎片時間采用60秒內(nèi)的語音形式來完成當天的考題
群主在次日0點推送當天的參考答案
注 絕不僅限于完成當天任務(wù)，更多是查漏補缺，學習群內(nèi)其它同學優(yōu)秀的答題思路
點擊加入答題
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101443.html
20190124問: 如何理解es6中的Proxy？ 試題解析:對proxy的理解，可能會延伸到vue的雙向綁定 Proxy（代理） 定義 可以理解為為目標對象架設(shè)一層攔截，外界對該對象的訪問，都必須通過這層攔截 簡單示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...
摘要：問中新增的數(shù)據(jù)類型有哪些使用場景中新增一種原始數(shù)據(jù)類型最大的特點是唯一性，值通過函數(shù)生成在中對象的屬性都是字符串，我們使用他人定義的對象，然后去新增自己的屬性，這樣容易起沖突覆蓋原有的屬性也可以看成為一個字符串，不過這個字符能保證是獨一無二 20190125問: Es6中新增的數(shù)據(jù)類型有哪些？使用場景？ es6中新增一種原始數(shù)據(jù)類型Symbol,最大的特點是唯一性，Symbol值通過S...
閱讀 2129·2023-04-25 17:48
閱讀 3615·2021-09-22 15:37
閱讀 2960·2021-09-22 15:36
閱讀 6051·2021-09-22 15:06
閱讀 1662·2019-08-30 15:53
閱讀 1455·2019-08-30 15:52
閱讀 736·2019-08-30 13:48
閱讀 1146·2019-08-30 12:44
