1.先看下定義:
proxy 可以理解成,在目標物件之前架設一層「攔截」,外界對該物件的訪問,都必須先通過這層攔截,因此提供了一種機制,可以對外界的訪問進行過濾和改寫。proxy 這個詞的原意是**,用在這裡表示由它來「**」某些操作,可以譯為「**器」。
語法:
let pro=
newproxy
(target, handler)
;
例項:
let obj=
;let proxy =
newproxy
(obj,})
;proxy.time // 7269
proxy.name // 7269
proxy.title // 7269
proxy的第乙個引數obj就是目標物件,get方法的兩個引數分別是目標物件和所要訪問的屬性。可以看到,由於攔截函式總是返回35,所以訪問任何屬性都得到7269。
注意,要使得proxy起作用,必須針對proxy例項(上例是proxy物件)進行操作,而不是針對目標物件(上例是空物件)進行操作。
如果handler沒有設定任何攔截,那就等同於直接通向原物件。
var target =
;var handler =
;var proxy =
newproxy
(target, handler)
;proxy.a =
'b';
target.a // "b
上面**中,handler是乙個空物件,沒有任何攔截效果,訪問proxy就等同於訪問target。
同乙個***函式,可以設定攔截多個操作
var handler =
return
'hello, '
+ name;},
function
(target, thisbinding, args)
, construct:
function
(target, args);}
};var fproxy =
newproxy
(function
(x, y)
, handler)
;fproxy(1
,2)// 1
newfproxy(1
,2)//
fproxy.prototype === object.prototype // true
fproxy.foo ===
"hello, foo"
// true
const target =
;const handler =
return reflect.
get(
...arguments);}
};const proxy =
newproxy
(target, handler)
;console.
log(proxy.notproxied)
;// "original value"
console.
log(proxy.proxied)
;// "replaced value"
2.對比
proxy 的優勢如下:
proxy 可以直接監聽物件而非屬性;
proxy 可以直接監聽陣列的變化;
proxy 返回的是乙個新物件,我們可以只操作新的物件達到目的,而 object.defineproperty
只能遍歷物件屬性直接修改;
proxy 作為新標準將受到瀏覽器廠商重點持續的效能優化,也就是傳說中的新標準的效能紅利;
object.defineproperty 的優勢如下:
相容性好,支援 ie9,而 proxy 的存在瀏覽器相容性問題,而且無法用 polyfill 磨平
handler 物件的方法 一共 13 種。大多都和object的方法功能很相似。就是和reflect的靜態方法是一樣的,想要了解具體用法的:
handler.
getprototypeof()
; 方法的捕捉器。
handler.
setprototypeof()
; 方法的捕捉器。
handler.
i***tensible()
; 方法的捕捉器。
handler.
preventextensions()
; 方法的捕捉器。
handler.
getownpropertydescriptor()
; 方法的捕捉器。
handler.
defineproperty()
; 方法的捕捉器。
handler.
has();
//in 操作符的捕捉器。
handler.
get();
//屬性讀取操作的捕捉器。
handler.
set();
//屬性設定操作的捕捉器。
handler.
deleteproperty()
;//delete 操作符的捕捉器。
handler.
ownkeys()
; 方法和 object.getownpropertysymbols 方法的捕捉器。
handler.()
;//函式呼叫操作的捕捉器。
handler.
construct()
;//new 操作符的捕捉器。
proxy的理解及proxy為什麼可以監聽陣列?
1,proxy的基本理解 proxy是es6中的語法,最為 的功能,當外接要訪問物件的時候,proxy可以做一層攔截,並且可以對這個proxy 進行操作,進而實現對物件的操作。如 var proxy newproxy obj,handler 這裡定義的proxy作為obj的 handler也是個物件...
Vue3 0為什麼使用Proxy實現雙向繫結
object.defineproperty只能劫持物件的屬性,而proxy是直接 物件 由於object.defineproperty只能對屬性進行劫持,需要遍歷物件的每個屬性。而proxy可以直接 物件。object.defineproperty對新增屬性需要手動進行observe,由於objec...
76個星座為什麼被詛咒 蛇夫座為什麼被詛咒的原因
蛇夫座為什麼被詛咒 雖然蛇夫座很早就被發現,但西方的占星術界卻從來沒把蛇夫座談論在星座學之中。如今又被大家當做第十三個星座被提及,其實在黃道裡面,穿過的星座不止十二個,也不止十三個,但每一次超過十二個,也不會被廣泛承認。也許是因為他們覺得十三這個數字很不吉利吧。蛇夫座傳說 加上關於蛇夫座的傳說也有些...