摘要:代理和反射的定義調(diào)用可常見代替其它目標對象的代理,它虛擬化了目標,所以二者看起來功能一致。代理可攔截引擎內(nèi)部目標的底層對象操作,這些底層操作被攔截后會觸發(fā)響應(yīng)特定操作的陷阱函數(shù)。
代理和反射的定義
調(diào)用 new Proxy() 可常見代替其它目標 (target) 對象的代理,它虛擬化了目標,所以二者看起來功能一致。
代理可攔截JS引擎內(nèi)部目標的底層對象操作,這些底層操作被攔截后會觸發(fā)響應(yīng)特定操作的陷阱函數(shù)。
反射 API 以 Reflect 對象的形式出現(xiàn),對象中方法的默認特性與相同的底層操作一致,而代理可以覆寫這種操作,每一個代理陷阱對應(yīng)一個命名和參數(shù)都相同的 Reflect 方法。
應(yīng)用基礎(chǔ)用法
let target = {}; let p = new Proxy(target, {}); p.a = 37; // 操作轉(zhuǎn)發(fā)到目標 console.log(target.a); // 37. 操作已經(jīng)被正確地轉(zhuǎn)發(fā)
get、set、has、deleteProperty的使用
get() 方法用于攔截對象的讀取屬性操作
set() 方法用于攔截設(shè)置屬性值的操作
has() 方法可以看作是針對 in 操作的鉤子
deleteProperty() 方法用于攔截對對象屬性的 delete 操作
let target = { name: "target", color: "blue", size: 50, skill: "drink" } let proxy = new Proxy(target, { set: function(trapTarget, key, value, receiver) { // 忽略不希望受到影響的已有屬性 if(!trapTarget.hasOwnProperty(key)) { if(isNaN(value)) { throw new TypeError("屬性必須是數(shù)字!") } } //添加屬性 return Reflect.set(trapTarget, key, value, receiver) }, get: function(trapTarget, key, receiver) { if(!(key in receiver)) { throw new TypeError(key + "屬性不存在!") } return Reflect.get(trapTarget, key, receiver) }, has: function(trapTarget, key) { if(key === "color") { return false }else { return Reflect.has(trapTarget, key) } }, deleteProperty: function(trapTarget, key) { if(key === "skill") { return false }else { return Reflect.deleteProperty(trapTarget, key) } } }); //添加一個新屬性 proxy.count = 1 console.log(target.count) //1 proxy.name = "proxy" console.log(proxy.name) //proxy console.log(target.name) //proxy proxy.anotherName = "proxy" //拋出錯誤: 屬性必須是數(shù)字! console.log(proxy.age) //拋出錯誤:age屬性不存在! console.log("name" in proxy) //true console.log("color" in proxy) //false console.log("size" in proxy) //true let result1 = delete proxy.size console.log("size" in proxy) //false console.log("skill" in proxy) //true let result2 = delete proxy.skill console.log("skill" in proxy) //true參考
《深入理解ES6》
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/102804.html
摘要:是陷阱函數(shù)對應(yīng)的反射方法,同時也是操作的默認行為。對象外形指的是對象已有的屬性與方法的集合,由于該屬性驗證只須在讀取屬性時被觸發(fā),因此只要使用陷阱函數(shù)。無論該屬性是對象自身的屬性還是其原型的屬性。 主要知識點:代理和反射的定義、常用的陷阱函數(shù)、可被撤銷的代理、將代理對象作為原型使用、將代理作為類的原型showImg(https://segmentfault.com/img/bVbfWr...
摘要:方法與代理處理程序的方法相同。使用給目標函數(shù)傳入指定的參數(shù)。當(dāng)然,不用反射也可以讀取的值。的例子我們可以理解成是攔截了方法,然后傳入?yún)?shù),將返回值賦值給,這樣我們就能在需要讀取這個返回值的時候調(diào)用。這種代理模式和的代理有異曲同工之妙。 反射 Reflect 當(dāng)你見到一個新的API,不明白的時候,就在瀏覽器打印出來看看它的樣子。 showImg(https://segmentfault....
摘要:方法與代理處理程序的方法相同。使用給目標函數(shù)傳入指定的參數(shù)。當(dāng)然,不用反射也可以讀取的值。的例子我們可以理解成是攔截了方法,然后傳入?yún)?shù),將返回值賦值給,這樣我們就能在需要讀取這個返回值的時候調(diào)用。這種代理模式和的代理有異曲同工之妙。 反射 Reflect 當(dāng)你見到一個新的API,不明白的時候,就在瀏覽器打印出來看看它的樣子。 showImg(https://segmentfault....
摘要:的出現(xiàn),使用內(nèi)建對象的繼承得以實現(xiàn)。屬性不存在拋出異常是取值操作,而就是賦值操作,可以對屬性值進行驗證。屬性必須為數(shù)字拋出異常接受兩個參數(shù)被讀取屬性的原對象,即代理的目標。這個可以攔截內(nèi)部方法,通過返回數(shù)組的值可以覆寫其行為。 Proxy & Reflect extends的出現(xiàn),使用內(nèi)建對象的繼承得以實現(xiàn)。Proxy可以攔截JS引擎內(nèi)部目標的底層對象操作,這些底層操作被攔截后會觸發(fā)響...
閱讀 1814·2021-09-22 15:54
閱讀 2923·2021-09-01 10:42
閱讀 3442·2019-08-30 15:56
閱讀 1432·2019-08-29 18:46
閱讀 2464·2019-08-29 10:57
閱讀 2703·2019-08-28 17:57
閱讀 3659·2019-08-23 18:14
閱讀 833·2019-08-23 17:03