ES6新標準 Proxy的講解

隨著vue3.0離我們越來越近了，無意中聽到的一句話，在學習3.0之前最好把es6的 map和set資料結構，proxy和reflect。

今天它來了，proxy 是es6新增加的乙個東西 翻譯過來就是**意思。

在js中有一種設計模式叫做**模式，為乙個目標物件新增乙個 中間層 不讓直接訪問和修改目標物件

**模式是一種對程式物件進行控制性訪問的一類解決方案。

不過這個**模式並不是 我們今天說的 重點，只是proxy 所實現就是**模式

你可以把proxy 理解成在目標物件前面加了乙個"攔截"層，外界想要訪問目標物件必須先過一下這個攔截。大家都知道vue2.0 使用的攔截是 object.definedproperty() 但是3.0很大的改寫就是 用了 proxy 做了攔截

這裡舉乙個小例子吧

var obj=

newproxy(,
,set
:function()
})console.
log(obj.name)
;// 獲取數值
obj.name=
"zhangsan"
// 設定數值

從上面可以看出和 確實實現了攔截 我們想要獲取和設定物件數值的時候，都出現了我們設定的攔截列印資訊

有的童鞋可能納悶 都攔截了 我們怎麼獲取物件的屬性值呢

這還不容易當然是 把攔截去掉不就行了

又有點廢話了 那要這個proxy 有啥用 至於怎麼獲取 屬性值 之後的 reflect 中會進行詳細講解 今天 只是講一講攔截層

不過上面的卻不是 玩笑話 你把攔截內容設定為空他就直接訪問到 源物件了

var obj=

var proxy=
newproxy
(obj,
)console.
log(proxy.name)
;// 輸出 張三

工作中我們會把他們分開進行書寫

正確格式是

var target=

// 目標物件 
var handler=
//進行攔截的內容
var proxy=
newproxy
(target,handler)
;// **物件

其實上面的 get 和set方法 裡面還可以傳入引數

var obj=

var proxy=
newproxy
(obj,
,set
:function
(target,key,value,receiver)})
proxy.name;
// 獲取 get
proxy.age=18;
// 設定 set
以後繼續 更新 關注我
 
ES6中Proxy的相容處理
proxy物件用於定義基本操作的自定義行為 如屬性查詢 賦值 列舉 函式呼叫等 proxy部分相容處理 author 範圍兄 window.proxy window.proxy function target,handler function proxy else else if handler.c...
ES6 中的Reflect和Proxy簡單介紹
proxy 與 reflect 是 es6 為了操作物件引入的 api reflect 可以用於獲取目標物件的行為，它與 object 類似，但是更易讀，為操作物件提供了一種更優雅的方式，函式式程式設計。它的方法與 proxy 是對應的。const obj reflect api方法1.refect...
ES6 新內容（二）Proxy和Iterator
1.proxy和reflect攔截 2.iterator遍歷器 proxy 攔截作用。var proxy new proxy target,handler proxy.revocable方法返回乙個可取消的proxy例項。在 proxy 的情況下，目標物件內部的this關鍵字會指向 proxy 修改...