es6 Proxy 學習筆記

2021-08-28 10:13:04 字數 1945 閱讀 6411

proxy(**),可以理解成,在目標物件之前架設一層(攔截),外界對物件的訪問都必須先通過這層攔截,通過這種**操作的機制,可以對外界的訪問進行過濾和修改。

let person=

let obj=new proxy(person,

})obj.name //'lilei'

obj.age // '暫無該值!'

proxy例項通過proxy建構函式生成

var proxy=new proxy(target,handler)
target是要攔截的物件

handler引數也是個物件,用來定製攔截行為,如果handler沒有設定任何攔截,等同於直接通向原物件。

proxy例項可以作為其他物件的原型物件

var proxy=new proxy(,{})

var obj=object.create(proxy)

obj.name //1

1、get(target, propkey, receiver)攔截物件屬性的讀取 

2、set(target, propkey, value, receiver)攔截物件屬性的設定 返回乙個布林值

3、has(target, propkey)攔截propkey in proxy的操作,返回乙個布林值

4、deleteproperty(target, propkey)攔截delete proxy[propkey]的操作,返回乙個布林值。

5、ownkeys(target)攔截object.getownpropertynames(proxy)、object.getownpropertysymbols(proxy)、object.keys(proxy)

for...in迴圈,返回乙個陣列。該方法返回目標物件所有自身的屬性的屬性名,而object.keys()的返回結果僅包括目標物件自身的可遍歷屬性。

6、getownpropertydescriptor(target, propkey)攔截object.getownpropertydescriptor(proxy, propkey),返回屬性的描述物件。

7、defineproperty(target, propkey, propdesc) 攔截object.defineproperty(proxy,propkey, propdesc)、 object.defineproperties(proxy, propdescs),返回乙個布林值。】

8、preventextensions(target)攔截object.preventextensions(proxy),返回乙個布林值。

9、getprototypeof(target)攔截object.getprototypeof(proxy),返回乙個物件。

10、i***tensible(target)攔截object.i***tensible(proxy),返回乙個布林值。

11、setprototypeof(target, proto)攔截object.setprototypeof(proxy, proto),返回乙個布林值。如果目標物件是函式,那麼還有兩種額外操作可以攔截。

13、construct(target, args):攔截 proxy 例項作為構造函式呼叫的操作,比如new proxy(...args)

ES6 Proxy的學習與理解

前一段時間在位元組跳動時聊到了proxy。起因是問道vue中資料繫結的實現,回答通過設定setter和getter實現,問這樣有什麼缺點,答在對物件的屬性的監控方面存在瑕疵,例如通過直接設定陣列下標進行賦值,或者對物件直接進行修改,是無法觀察到的,必須使用vue.set新增,或者使用array.pr...

es6 proxy的簡單使用

proxy,顧名思義是 的意思 也就是對乙個操作的 比如當我們對乙個物件要進行操作的時候,我們是這樣寫的 展示出來的效果是這樣的 瀏覽器有點問題,所以在node的環境下執行 在使用了proxy後,我們的會變成這樣 結果如下 流程的大概是這樣,1.當我們用了上面的寫法後 不要問為什麼這麼寫,遵守是唯一...

ES6 Proxy的基本使用

目標物件 let p 建立 物件 let proxy new proxy p,攔截物件屬性的賦值操作 set target,key,value 屬性無效 target key value return true 攔截判斷物件是否具有某個屬性 in has target,key return key ...