es6 proxy的簡單使用

2021-08-28 11:41:31 字數 845 閱讀 8935

proxy,顧名思義是**的意思;也就是對乙個操作的**,比如當我們對乙個物件要進行操作的時候,我們是這樣寫的:

展示出來的效果是這樣的:(瀏覽器有點問題,所以在node的環境下執行)

在使用了proxy後,我們的會變成這樣:

結果如下:

流程的大概是這樣,

1.當我們用了上面的寫法後(不要問為什麼這麼寫,遵守是唯一的規矩),我們就會對myobj的訪問進行乙個**,攔截,當時這個往往是不知情的,就比如用getter還有setter的時候是物件知情的,這點要區分下,

2.當用proxy的時候,我們在改變值的時候,會觸發set的方法,且set有四個引數,建議乙個個去列印出來,慢慢的檢視;

獲取值的時候,自然而然會觸發get方法,也有是三個引數,還是建議乙個個去列印出來,慢慢的檢視;

3.既然是**,當我們在最後的get還有set方法的末尾,我們需要return下,去真正的呼叫那個函式;這點是非常重要的;

5.最後注意相容性

ES6 Proxy的基本使用

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

es6 Proxy 學習筆記

proxy 可以理解成,在目標物件之前架設一層 攔截 外界對物件的訪問都必須先通過這層攔截,通過這種 操作的機制,可以對外界的訪問進行過濾和修改。let person let obj new proxy person,obj.name lilei obj.age 暫無該值 proxy例項通過prox...

ES6 Proxy的學習與理解

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