ES6 Proxy的基本使用

2022-06-05 17:42:10 字數 1021 閱讀 4733

//目標物件

let p =

//建立**物件

let proxy = new proxy(p,

},//攔截物件屬性的賦值操作

set(target, key, value) "屬性無效`)

}target[key] = value

return true

},//攔截判斷物件是否具有某個屬性 in

has(target, key)

return key in target

},//攔截delete操作

deleteproperty(target, key) else

},//攔截物件自身屬性的讀取操作。

//for...in、object.keys()、object.getownpropertysymbols()..

ownkeys(target)

})//直接讀取目標物件的屬性

console.log(p.name)

//通過**物件讀取目標物件的屬性,增加的名稱資訊遮蔽的操作

console.log(proxy.name)

// p.__skill__="華山劍法"

// console.log(p)

proxy.age = 28

console.log("proxy", proxy)

// proxy.__skill__ = "華山劍法"

// console.log("proxy", proxy)

console.log("__skill__" in p)

console.log("__skill__" in proxy)

for (let key in proxy)

// delete proxy.__skill__

// console.log("proxy", proxy)

// delete proxy.name

// console.log("proxy", proxy)

es6 proxy的簡單使用

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

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...