1、Proxy 對(duì)象到底是什么？Proxy 對(duì)象到底是什么呢？Proxy 的意思是 代理，proxy對(duì)象的作用是：
通過(guò)Proxy 創(chuàng)建1個(gè)代理對(duì)象，然后通過(guò)操作代理對(duì)象允許你對(duì)指定的對(duì)象的一些行為進(jìn)行自定義處理。
Proxy(target,handler);
Proxy構(gòu)造函數(shù)接收2個(gè)對(duì)象，第1個(gè)參數(shù)就是要處理的對(duì)象，第2個(gè)參數(shù)就是要自定義處理的方法的合集(也就是個(gè)對(duì)象)。
很抽象？其實(shí)就和js中的Object.defineProperty很像(也就是訪問(wèn)器屬性,vue2.x的底層就是用它來(lái)實(shí)現(xiàn)的)。
Object.defineProperty 定義訪問(wèn)器屬性，可以對(duì)某個(gè)屬性的讀寫行為進(jìn)行控制，在Proxy中也可以做到，而且Proxy更靈活和強(qiáng)大，它能做到很多訪問(wèn)器屬性做不到的事情。
比如，監(jiān)聽(tīng)屬性刪除事件(delete obj.prop;
),in 事件('
id'
in obj;
), apply 調(diào)用等。
先來(lái)看看，proxy對(duì)象有哪些內(nèi)容。
var targetObj = {
id : 1, name : '
pxh'
, age : 20, school : '
小學(xué)'
}
var handler = {
}
;
// 此處，我們先不對(duì)targetObj的行為進(jìn)行干預(yù)，所以傳個(gè)空對(duì)象進(jìn)去即可。
var proxy = new Proxy(targetObj,handler);
console.log(proxy);
看看打印的proxy是什么鬼，如下圖。
可以看到，proxy對(duì)象中，包含了Handler屬性和Target屬性和IsRevoked，它們的值分別是我們傳入的handler以及 targetObj和false。
這個(gè)isRevoked表示是否可撤銷，生成可撤銷的proxy對(duì)象用Proxy.revocable()方法，具體可去MDN查看文檔。
2、通過(guò)Proxy 對(duì)象操作原對(duì)象上面我們創(chuàng)建了1個(gè)proxy對(duì)象，現(xiàn)在我們嘗試通過(guò)操作proxy對(duì)象來(lái)操作原對(duì)象，操作proxy對(duì)象就和操作原生對(duì)象一樣即可。
(其實(shí)是proxy對(duì)象內(nèi)部做了映射。
) var targetObj = {
id : 1, name : '
pxh'
, age : 20, school : '
小學(xué)'
}
var handler = {
}
;
// 此處，我們先不對(duì)targetObj的行為進(jìn)行干預(yù)，所以傳個(gè)空對(duì)象進(jìn)去即可。
var proxy = new Proxy(targetObj,handler);
/** * 1、讀取及修改屬性，可以看到原來(lái)的對(duì)象的屬性也被修改了 */ console.log(proxy.age);
// 20 console.log(targetObj.age);
// 20 proxy.age = 22;
console.log(proxy.age);
// 22 console.log(targetObj.age);
// 22 /** * 2、刪除proxy對(duì)象的屬性，影響原來(lái)的對(duì)象的屬性 */ console.log(proxy.school);
// 小學(xué) console.log(targetObj.school);
// 小學(xué) delete proxy.age;
console.log(proxy.school);
// undefined console.log(targetObj.school);
// undefined3、set方法和get方法好，現(xiàn)在我們可以開(kāi)始干預(yù)原來(lái)對(duì)象的行為了，具體我們通過(guò)實(shí)現(xiàn)以下方法達(dá)到干預(yù)對(duì)象行為的目的。
handler.applyhandler.construct 干預(yù)構(gòu)造函數(shù)的new 行為handler.defineProperty 干預(yù)對(duì)象的數(shù)據(jù)屬性或者訪問(wèn)器屬性定義handler.deleteProperty 干預(yù)對(duì)象的屬性刪除行為handler.get 干預(yù)對(duì)象的屬性讀取行為handler.getOwnProperty 干預(yù)對(duì)象的屬性的特征值handler.has 干預(yù)對(duì)象的in行為(prop in obj)handler.isExtensiblehandler.ownKeyshandler.set 干預(yù)對(duì)象的屬性設(shè)置行為...先來(lái)干預(yù)get行為(屬性讀取行為) var targetObj = {
id : 1, name : '
pxh'
, age : 20, school : '
小學(xué)'
}
var handler = {
// 定義get方法，get方法可以接收2個(gè)參數(shù)，分別是原來(lái)的對(duì)象及屬性 get : function(target,prop){
console.log(`${
prop}
屬性正在被查看`);
console.log(targetObj == target);
// true return target[prop];
}
}
;
var proxy = new Proxy(targetObj,handler);
console.log(proxy.id);
/** * 可以看到，打印順序?yàn)? * id屬性正在被查看 * true * 1 */接下來(lái)把某些屬性變?yōu)?“私有” ，如不允許讀取id屬性定義set方法，不允許修改id,name,age屬性 var targetObj = {
id : 1, name : '
pxh'
, age : 20, school : '
小學(xué)'
}
var handler = {
// 定義get方法，get方法可以接收2個(gè)參數(shù)，分別是原來(lái)的對(duì)象及屬性 get : function(target,prop){
if(prop == '
id'
){
return undefined;
}
return target[prop];
}
, // 定義set方法，set方法比get多1個(gè)參數(shù)，那就是該屬性修改時(shí)的值 set : function(target,prop,value){
if(prop == '
id'
|| prop == '
name'
|| prop == '
age'
){
console.log(`不允許修改${
prop}
屬性`) }
else{
target[prop] = value;
}
}
}
;
var proxy = new Proxy(targetObj,handler);
/** * 修改屬性，分別打印 * 不允許修改id屬性 * 不允許修改name屬性 * 不允許修改age屬性 */ proxy.id = 2;
proxy.name = '
pxh222'
;
proxy.age = 23;
proxy.school = '
中學(xué)'
;
// 這個(gè)無(wú)打印 /** * 讀取屬性，可以看到分別打印 * undefined * pxh * 20 * 中學(xué) // 這個(gè)沒(méi)有攔截，因此可以修改 */ console.log(proxy.id);
console.log(proxy.name);
console.log(proxy.age);
console.log(proxy.school);
4、干預(yù)刪除行為(對(duì)delete obj.prop語(yǔ)句生效)同樣的，我們對(duì)刪除對(duì)象屬性的行為進(jìn)行干預(yù)，不允許刪除id,name,age屬性。
var targetObj = {
id : 1, name : '
pxh'
, age : 20, school : '
小學(xué)'
}
var handler = {
// 在handler中定義get方法，get方法可以接收2個(gè)參數(shù)，分別是原來(lái)的對(duì)象及屬性 get : function(target,prop){
if(prop == '
id'
){
return undefined;
}
return target[prop];
}
, // set方法比get多1個(gè)參數(shù)，那就是該屬性修改時(shí)的值 set : function(target,prop,value){
if(prop == '
id'
|| prop == '
name'
|| prop == '
age'
){
console.log(`不允許修改${
prop}
屬性`) }
else{
target[prop] = value;
}
}
, /** * 這個(gè)方法要求返回個(gè)boolean值，表示是否刪除成功 * 如果返回的值不是boolean值，則會(huì)進(jìn)行類型轉(zhuǎn)換成boolean值再返回 */ deleteProperty : function(target,prop){
if(prop == '
id'
|| prop == '
name'
|| prop == '
age'
){
console.log(`不允許刪除${
prop}
屬性`);
return false;
}
else{
delete target[prop];
return true;
}
}
}
;
var proxy = new Proxy(targetObj,handler);
/** * 嘗試刪除id屬性，可以看到打印順序?yàn)? * 不允許刪除id屬性 * false */ console.log(delete proxy.id);
/** * 刪除school屬性，可以看到打印 * true * undefined */ console.log(delete proxy.school);
console.log(proxy.school);
5、干預(yù)prop in obj行為(判斷對(duì)象是否有某個(gè)屬性)上面我們不允許獲取對(duì)象的id值，也不可以修改和刪除，現(xiàn)在我們把它隱藏掉。
var targetObj = {
id : 1, name : '
pxh'
, age : 20, school : '
小學(xué)'
}
var handler = {
// 在handler中定義get方法，get方法可以接收2個(gè)參數(shù)，分別是原來(lái)的對(duì)象及屬性 get : function(target,prop){
if(prop == '
id'
){
return undefined;
}
return target[prop];
}
, // set方法比get多1個(gè)參數(shù)，那就是該屬性修改時(shí)的值 set : function(target,prop,value){
if(prop == '
id'
|| prop == '
name'
|| prop == '
age'
){
console.log(`不允許修改${
prop}
屬性`) }
else{
target[prop] = value;
}
}
, /** * 這個(gè)方法要求返回個(gè)boolean值，表示是否刪除成功 * 如果返回的值不是boolean值，則會(huì)進(jìn)行類型轉(zhuǎn)換成boolean值再返回 */ deleteProperty : function(target,prop){
if(prop == '
id'
|| prop == '
name'
|| prop == '
age'
){
console.log(`不允許刪除${
prop}
屬性`);
return false;
}
else{
delete target[prop];
return true;
}
}
, /** * 通過(guò)has 方法來(lái)控制，返回值也是個(gè)boolean，表示對(duì)象是否擁有某個(gè)屬性 * 如果返回的值不是boolean值，則會(huì)進(jìn)行類型轉(zhuǎn)換成boolean值再返回 */ has : function(target,prop){
if(prop == '
id'
){
return false }
else{
return prop in target;
}
}
}
;
var proxy = new Proxy(targetObj,handler);
console.log('
id'
in proxy);
// false console.log('
name'
in proxy);
// true6、總結(jié)同樣的，proxy還能干預(yù)對(duì)象的行為還有很多，這里就不一一介紹了。
感興趣戳MDN文檔推薦教程：
《微信小程序》以上就是Proxy 對(duì)象的了解及學(xué)習(xí)的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
Proxy本文轉(zhuǎn)載于：
簡(jiǎn)書，如有侵犯，請(qǐng)聯(lián)系[email protected]刪除
上一篇：
電腦微信小程序設(shè)置全屏的方法是什么？
下一篇：
使用小程序?qū)懸粋€(gè)彈窗輸入組件相關(guān)文章相關(guān)視頻nginx和haproxy的區(qū)別proxy服務(wù)器是什么Proxy封裝小程序的異步調(diào)用proxy error是什么意思Proxy 對(duì)象的了解及學(xué)習(xí)mysql-proxy軟件實(shí)現(xiàn)數(shù)據(jù)庫(kù)讀寫分離實(shí)戰(zhàn)通過(guò)proxy攔截對(duì)象屬性的操作 [溫州做小程序]