摘要:問題無法監(jiān)控到數(shù)組下標(biāo)的變化。的指向雖然可以代理針對目標(biāo)對象的訪問,但它不是目標(biāo)對象的透明代理,即不做任何攔截的情況下,也無法保證與目標(biāo)對象的行為一致。主要原因就是在代理的情況下,目標(biāo)對象內(nèi)部的關(guān)鍵字會指向代理。
Object.defineProperty問題
Object.defineProperty() 無法監(jiān)控到數(shù)組下標(biāo)的變化。vue只能通過以下幾種方法來監(jiān)聽
push() pop() shift() unshift() splice() sort() reverse()
以上幾種方法也是經(jīng)過vue內(nèi)部處理后才能監(jiān)聽的。
只能劫持對象的屬性,因此我們需要對每個(gè)對象的每個(gè)屬性進(jìn)行遍歷,如果屬性值也是對象那么需要深度遍歷,顯然能劫持一個(gè)完整的對象是更好的選擇。
Proxy代理:對外暴露代理對象,操作的時(shí)候,表面上操作的是代理對象(proxy),實(shí)際上改變的是目標(biāo)對象 (target),從而可以在操作代理對象的時(shí)候進(jìn)行一些處理(handler)后,再傳遞到目標(biāo)對象。
特點(diǎn):可以劫持整個(gè)對象,并返回一個(gè)新對象
有13種劫持操作
Proxy是es6提供的,兼容性不好,無法用polyfill磨平
Proxy使用:es6提供proxy構(gòu)造函數(shù),第一個(gè)參數(shù)target:是所要代理的目標(biāo)對象,可以是空對象。第二個(gè)handler是攔截器,一個(gè)攔截器可以有多個(gè)攔截操作
var proxy = new Proxy(target, handler);
所有的對target的操作都落在proxy上了。
攔截操作一共有13個(gè)get
get(target, propKey, receiver):攔截對象屬性的讀取 可以繼承
set
set(target, propKey, value, receiver):攔截對象屬性的設(shè)置,比如proxy.foo = v或proxy["foo"] = v,返回一個(gè)布爾值。
更多攔截器信息>>
Reflect反射:通過類的類類型來操作類的屬性。包含來對象語言內(nèi)部的方法,一共有13種,和proxy一一對應(yīng),如果在Proxy中調(diào)用Reflect的話,其實(shí)對應(yīng)的就是默認(rèn)行為。
Proxy的this指向雖然 Proxy 可以代理針對目標(biāo)對象的訪問, 但它不是目標(biāo)對象的透明代理,即不做任何攔截的情況下,也無法保證與目標(biāo)對象的行為一致。主要原因就是在 Proxy 代理的情況下,目標(biāo)對象內(nèi)部的this關(guān)鍵字會指向 Proxy 代理。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/98091.html
摘要:存取描述符同時(shí)具有以下可選鍵值一個(gè)給屬性提供的方法,如果沒有則為。該方法返回值被用作屬性值。值得注意的是屬性描述符必須是數(shù)據(jù)描述符或者存取描述符兩種形式之一,不能同時(shí)是兩者??梢院雎苑椒ǖ姆祷刂怠? 前言 我們或多或少都聽過數(shù)據(jù)綁定這個(gè)詞,數(shù)據(jù)綁定的關(guān)鍵在于監(jiān)聽數(shù)據(jù)的變化,可是對于這樣一個(gè)對象:var obj = {value: 1},我們該怎么知道 obj 發(fā)生了改變呢? define...
摘要:使用陷阱驗(yàn)證屬性用于接收屬性代理的目標(biāo)的對象要寫入的屬性鍵被寫入的屬性的值操作發(fā)生的對象通常是代理屬性必須是數(shù)字拋錯用陷阱驗(yàn)證對象結(jié)構(gòu)屬性不存在拋出錯誤使用陷阱隱藏已有屬性可以用操作符來檢測給定對象中是否包含有某個(gè)屬性,如果自有屬性或原型屬 使用set陷阱驗(yàn)證屬性 let target = { name: target } let proxy = new Proxy(targe...
摘要:使用陷阱驗(yàn)證屬性用于接收屬性代理的目標(biāo)的對象要寫入的屬性鍵被寫入的屬性的值操作發(fā)生的對象通常是代理屬性必須是數(shù)字拋錯用陷阱驗(yàn)證對象結(jié)構(gòu)屬性不存在拋出錯誤使用陷阱隱藏已有屬性可以用操作符來檢測給定對象中是否包含有某個(gè)屬性,如果自有屬性或原型屬 使用set陷阱驗(yàn)證屬性 let target = { name: target } let proxy = new Proxy(targe...
摘要:查找并返回對象的屬性例例屬性部署了讀取函數(shù)返回的是的參數(shù)對象注意如果的第一個(gè)參數(shù)不是對象,則會報(bào)錯。它返回一個(gè)布爾值,表示是否操作成功用于返回對象的所有屬性使用和實(shí)現(xiàn)觀察者模式請參考觀察者模式 1、什么是Reflect?為操作對象而提供的新API 2、為什么要設(shè)計(jì)Reflect?(1)將Object對象的屬于語言內(nèi)部的方法放到Reflect對象上,即從Reflect對象上拿Object...
摘要:返回一個(gè)布爾值攔截操作符,返回一個(gè)布爾值攔截操作符,返回一個(gè)布爾值攔截遍歷器,返回一個(gè)遍歷器攔截,返回一個(gè)布爾值攔截,返回一個(gè)數(shù)組。 Proxy 對象 Proxy 用來修改某些默認(rèn)操作,等同于在語言層面做出修改。所以屬于一種元編程(meta programming), 即對編程語言進(jìn)行編程。字面理解為Proxy代理了某些默認(rèn)的操作。其使用格式如下: var proxy = new Pr...
閱讀 753·2023-04-25 20:32
閱讀 2360·2021-11-24 10:27
閱讀 4564·2021-09-29 09:47
閱讀 2278·2021-09-28 09:36
閱讀 3689·2021-09-22 15:27
閱讀 2800·2019-08-30 15:54
閱讀 398·2019-08-30 11:06
閱讀 1299·2019-08-30 10:58