proxy的理解及proxy為什麼可以監聽陣列？

1，proxy的基本理解

proxy是es6中的語法，最為**的功能，當外接要訪問物件的時候，proxy可以做一層攔截，並且可以對這個proxy**進行操作，進而實現對物件的操作。如：

var proxy =
newproxy
(obj, handler)

這裡定義的proxy作為obj的**，handler也是個物件，在這裡進行操作，proxy和obj始終保持狀態一直，proxy進行了什麼操作之後，obj同樣做出改變，是乙個對obj全物件的監聽。目前有14攔截操作，具體可看es6文件。

2，proxy和reflect關係

reflect也是es6的語法，再proxy使用中常用到reflect，reflect有14中方法，對應proxy是一樣的，但是這倆其實沒關係，只是搭配著使用，proxy用來攔截，reflect用來操作。

var obj =
;var proxy =
newproxy
(obj,
,set
:function
(target, key, value, receiver)})
;proxy.b //get的key為 ===>b
proxy.a =
5//set的key和value為 ===>a 5
proxy.b =
2//set的key和value為 ===>b 2

第乙個proxy.b，沒有賦值操作直接點乙個屬性，這時候走的就是get方法，reflect返回的就是key，也就是b。

第二個給**物件proxy的a複製5，走的就是set方法，裡面的reflect.set是把value值賦給當前物件的key，就是把5賦給a。

3，為什麼可以監聽陣列

執行下面**：

let arr =[1
,2,3
]let proxy =
newproxy
(arr,
,set
(target, key, value, receiver)})
proxy[0]
// set的key為 ===>0
proxy[3]
=12// set的key為 ===>3 12

可以看到，和上面obj的時候結果一樣，key值是索引，如果使用陣列的方法呢？

proxy.
push
('2'
)// get的key為 ===>push
// get的key為 ===>length
// set的key為 ===>3 2
// set的key為 ===>length 4
console.
log(proxy,
'proxy的length='
+ proxy.length)
console.
log(arr,
'arr的length='
+ arr.length)
// get的key為 ===>length
// proxy "proxy的length=3"
// [1, 2, 3] "arr的length=3"

可以看到，get方法走了兩邊，set方法走了兩邊。因為push方法其實做了兩步，第一是再length出加上push的值，第二是把length加一，所以走了兩邊。

原因：

從**執行上看，確實是可以監聽陣列，分析下，首先，陣列其實也是物件，從typeof方法可以看出來，不然，陣列也不能使用.length,[0],.push()等，如果把陣列寫成類陣列物件，就好理解多了。

let objarr =

從console的結果所以可以看出，這裡的proxy就是個類陣列。那麼可以猜想，如果proxy第乙個引數傳的是陣列時，proxy就會轉化成類陣列，也可以呼叫陣列的方法，length、push等，找不到的方法就去原型鏈上找。

所以，如果陣列長度改變，key值就是length，呼叫push等方法，key就是push。這樣一切就理的通了。當然這也是我個人再學習proxy時候的一些理解，也或許是這樣或許不是這樣，但我這樣去理解確實會明白多，如果不對的話希望大家看了之後可以糾正指點。

proxy的理解及proxy為什麼可以監聽陣列？

為kubespray開啟proxy模式

vue中關於proxy的理解

Proxy的配置公式。

proxy的理解及proxy為什麼可以監聽陣列？

為kubespray開啟proxy模式

vue中 關於proxy的理解

Proxy的配置公式。

相關推薦

vue中關於proxy的理解