自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

Proxy 對象（Proxy）是 ES6 的一個非常酷卻鮮為人知的特性。雖然這個特性存在已久，但是我還是想在本文中對其稍作解釋，并用一個例子說明一下它的用法。

什么是 Proxy

正如 MDN 上簡單而枯燥的定義：

Proxy 對象用于定義基本操作的自定義行為（如屬性查找，賦值，枚舉，函數調用等）。

雖然這是一個不錯的總結，但是我卻并沒有從中搞清楚 Proxy 能做什么，以及它能幫我們實現什么。

首先，Proxy 的概念來源于元編程。簡單的說，元編程是允許我們運行我們編寫的應用程序（或核心）代碼的代碼。例如，臭名昭著的 eval 函數允許我們將字符串代碼當做可執行代碼來執行，它是就屬于元編程領域。

Proxy API 允許我們在對象和其消費實體中創建中間層，這種特性為我們提供了控制該對象的能力，比如可以決定怎樣去進行它的 get 和 set，甚至可以自定義當訪問這個對象上不存在的屬性的時候我們可以做些什么。

Proxy 的 API

var
 p=new
 
Proxy
(
target
,
 handler
);

Proxy 構造函數獲取一個 target 對象，和一個用來攔截 target 對象不同行為的 handler對象。你可以設置下面這些攔截項：

• has —?攔截 in 操作。比如，你可以用它來隱藏對象上某些屬性。
• get —?用來攔截讀取操作。比如當試圖讀取不存在的屬性時，你可以用它來返回默認值。
• set — 用來攔截賦值操作。比如給屬性賦值的時候你可以增加驗證的邏輯，如果驗證不通過可以拋出錯誤。
• apply — 用來攔截函數調用操作。比如，你可以把所有的函數調用都包裹在 try/catch 語句塊中。

這只是一部分攔截項，你可以在 MDN 上找到完整的列表。

下面是將 Proxy 用在驗證上的一個簡單的例子：

const
 
Car={
 maker
:
 
'BMW'
,
 year
:
 
2018
,
};
const
 proxyCar=new
 
Proxy
(
Car
,
 
{
 
set
(
obj
,
 prop
,
 value
)
 
{
 
if
 
(
prop==='maker'
 
&&
 value
.
length 
<
 
1
)
 
{
 
throw
 
new
 
Error
(
'Invalid maker'
);
 
}
 
if
 
(
prop==='year'
 
&&
 
typeof
 value 
!=='number'
)
 
{
 
throw
 
new
 
Error
(
'Invalid year'
);
 
}
 obj
[
prop
]=value
;
 
return
 
true
;
 
}
});
proxyCar
.
maker=''
;
 
// throw exception
proxyCar
.
year='1999'
;
 
// throw exception

可以看到，我們可以用 Proxy 來驗證賦給被代理對象的值。

使用 Proxy 來調試

為了在實踐中展示 Proxy 的能力，我創建了一個簡單的監測庫，用來監測給定的對象或類，監測項如下：

• 函數執行時間
• 函數的調用者或屬性的訪問者
• 統計每個函數或屬性的被訪問次數。

這是通過在訪問任意對象、類、甚至是函數時，調用一個名為 proxyTrack 的函數來完成的。

如果你希望監測是誰給一個對象的屬性賦的值，或者一個函數執行了多久、執行了多少次、誰執行的，這個庫將非常有用。我知道可能還有其他更好的工具來實現上面的功能，但是在這里我創建這個庫就是為了用一用這個 API。

使用 proxyTrack

首先，我們看看怎么用：

function
 
MyClass
()
 
{}
MyClass
.
prototype={
 isPrime
:
 
function
()
 
{
 
const
 num=this
.
num
;
 
for
(
var
 i=2
;
 i 
<
 num
;
 i
++)
 
if
(
num 
%
 i===0
)
 
return
 
false
;
 
return
 num 
!==1
 
&&
 num 
!==0
;
 
},
 num
:
 
null
,
};
MyClass
.
prototype
.
constructor=MyClass
;
const
 trackedClass=proxyTrack
(
MyClass
);
function
 start
()
 
{
 
const
 my=new
 trackedClass
();
 my
.
num=573723653
;
 
if
 
(!
my
.
isPrime
())
 
{
 
return
 
`
$
{
my
.
num
}
 is not prime
`;
 
}
}
function
 main
()
 
{
 start
();
}
main
();

如果我們運行這段代碼，控制臺將會輸出：

MyClass
.
num is being 
set
 by start 
for
 the 
1
 time
MyClass
.
num is being get by isPrime 
for
 the 
1
 time
MyClass
.
isPrime was called by start 
for
 the 
1
 time and took 
0
 mils
.
MyClass
.
num is being get by start 
for
 the 
2
 time

proxyTrack 接受 2 個參數：第一個是要監測的對象/類，第二個是一個配置項對象，如果沒傳遞的話將被置為默認值。我們看看這個配置項默認值長啥樣：

const
 defaultOptions={
 trackFunctions
:
 
true
,
 trackProps
:
 
true
,
 trackTime
:
 
true
,
 trackCaller
:
 
true
,
 trackCount
:
 
true
,
 stdout
:
 
null
,
 filter
:
 
null
,
};

可以看到，你可以通過配置你關心的監測項來監測你的目標。比如你希望將結果輸出出來，那么你可以將 console.log 賦給 stdout。

還可以通過賦給 filter 的回調函數來自定義地控制輸出哪些信息。你將會得到一個包括有監測信息的對象，并且如果你希望保留這個信息就返回 true，反之返回 false。

在 React 中使用 proxyTrack

因為 React 的組件實際上也是類，所以你可以通過 proxyTrack 來實時監控它。比如：

class
 
MyComponent
 extends 
Component
{...}
export
 
default
 connect
(
mapStateToProps
)(
proxyTrack
(
MyComponent
,
 
{
 trackFunctions
:
 
true
,
 trackProps
:
 
true
,
 trackTime
:
 
true
,
 trackCaller
:
 
true
,
 trackCount
:
 
true
,
 filter
:
 
(
data
)=>
 
{
 
if
(
 data
.
type==='get'
 
&&
 data
.
prop==='componentDidUpdate'
)
 
return
 
false
;
 
return
 
true
;
 
}
}));

可以看到，你可以將你不關心的信息過濾掉，否則輸出將會變得雜亂無章。

實現 proxyTrack

我們來看看 proxyTrack 的實現。

首先是這個函數本身：

export
 
function
 proxyTrack
(
entity
,
 options=defaultOptions
)
 
{
 
if
 
(
typeof
 entity==='function'
)
 
return
 trackClass
(
entity
,
 options
);
 
return
 trackObject
(
entity
,
 options
);
}

沒什么特別的嘛，這里只是調用相關函數。

再看看 trackObject：

function
 trackObject
(
obj
,
 options={})
 
{
 
const
 
{
 trackFunctions
,
 trackProps 
}=options
;
 let resultObj=obj
;
 
if
 
(
trackFunctions
)
 
{
 proxyFunctions
(
resultObj
,
 options
);
 
}
 
if
 
(
trackProps
)
 
{
 resultObj=new
 
Proxy
(
resultObj
,
 
{
 
get
:
 trackPropertyGet
(
options
),
 
set
:
 trackPropertySet
(
options
),
 
});
 
}
 
return
 resultObj
;
}
function
 proxyFunctions
(
trackedEntity
,
 options
)
 
{
 
if
 
(
typeof
 trackedEntity==='function'
)
 
return
;
 
Object
.
getOwnPropertyNames
(
trackedEntity
).
forEach
((
name
)=>
 
{
 
if
 
(
typeof
 trackedEntity
[
name
]==='function'
)
 
{
 trackedEntity
[
name
]=new
 
Proxy
(
trackedEntity
[
name
],
 
{
 apply
:
 trackFunctionCall
(
options
),
 
});
 
}
 
});
}

可以看到，假如我們希望監測對象的屬性，我們創建了一個帶有 get 和 set 攔截器的被監測對象。下面是 set 攔截器的實現：

function
 trackPropertySet
(
options={})
 
{
 
return
 
function
 
set
(
target
,
 prop
,
 value
,
 receiver
)
 
{
 
const
 
{
 trackCaller
,
 trackCount
,
 stdout
,
 filter 
}=options
;
 
const
 error=trackCaller 
&&
 
new
 
Error
();
 
const
 caller=getCaller
(
error
);
 
const
 contextName=target
.
constructor
.
name==='Object'
 
?
 
''
 
:
 
`
$
{
target
.
constructor
.
name
}.`;
 
const
 name=`
$
{
contextName
}
$
{
prop
}`;
 
const
 hashKey=`
set_$
{
name
}`;
 
if
 
(
trackCount
)
 
{
 
if
 
(!
callerMap
[
hashKey
])
 
{
 callerMap
[
hashKey
]=1
;
 
}
 
else
 
{
 callerMap
[
hashKey
]++;
 
}
 
}
 let output=`
$
{
name
}
 is being 
set
`;
 
if
 
(
trackCaller
)
 
{
 output 
+=`
 by $
{
caller
.
name
}`;
 
}
 
if
 
(
trackCount
)
 
{
 output 
+=`
 
for
 the $
{
callerMap
[
hashKey
]}
 time
`;
 
}
 let canReport=true
;
 
if
 
(
filter
)
 
{
 canReport=filter
({
 type
:
 
'get'
,
 prop
,
 name
,
 caller
,
 count
:
 callerMap
[
hashKey
],
 value
,
 
});
 
}
 
if
 
(
canReport
)
 
{
 
if
 
(
stdout
)
 
{
 stdout
(
output
);
 
}
 
else
 
{
 console
.
log
(
output
);
 
}
 
}
 
return
 
Reflect
.
set
(
target
,
 prop
,
 value
,
 receiver
);
 
};
}

更有趣的是 trackClass 函數（至少對我來說是這樣）：

function
 trackClass
(
cls
,
 options={})
 
{
 cls
.
prototype=trackObject
(
cls
.
prototype
,
 options
);
 cls
.
prototype
.
constructor=cls
;
 
return
 
new
 
Proxy
(
cls
,
 
{
 construct
(
target
,
 args
)
 
{
 
const
 obj=new
 target
(...
args
);
 
return
 
new
 
Proxy
(
obj
,
 
{
 
get
:
 trackPropertyGet
(
options
),
 
set
:
 trackPropertySet
(
options
),
 
});
 
},
 apply
:
 trackFunctionCall
(
options
),
 
});
}

在這個案例中，因為我們希望攔截這個類上不屬于原型上的屬性，所以我們給這個類的原型創建了個代理，并且創建了個構造函數攔截器。

別忘了，即使你在原型上定義了一個屬性，但如果你再給這個對象賦值一個同名屬性，JavaScript 將會創建一個這個屬性的本地副本，所以賦值的改動并不會改變這個類其他實例的行為。這就是為何只對原型做代理并不能滿足要求的原因。

作者：前端下午茶 公號 / SHERlocked93