溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹Proxy對象是什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
Proxy 對象到底是什么呢？Proxy 的意思是 代理，proxy對象的作用是：通過Proxy 創建1個代理對象，然后通過操作代理對象允許你對指定的對象的一些行為進行自定義處理。
Proxy(target,handler); Proxy構造函數接收2個對象，第1個參數就是要處理的對象，第2個參數就是要自定義處理的方法的合集(也就是個對象)。
很抽象？其實就和js中的Object.defineProperty很像(也就是訪問器屬性,vue2.x的底層就是用它來實現的)。
Object.defineProperty 定義訪問器屬性，可以對某個屬性的讀寫行為進行控制，在Proxy中也可以做到，而且Proxy更靈活和強大，它能做到很多訪問器屬性做不到的事情。
比如，監聽屬性刪除事件(delete obj.prop;),in 事件('id' in obj;), apply 調用等。
先來看看，proxy對象有哪些內容。
var targetObj = {
id : 1,
name : 'pxh',
age : 20,
school : '小學'
}
var handler = {};
// 此處，我們先不對targetObj的行為進行干預，所以傳個空對象進去即可。
var proxy = new Proxy(targetObj,handler);
console.log(proxy);看看打印的proxy是什么鬼，如下圖。
可以看到，proxy對象中，包含了Handler屬性和Target屬性和IsRevoked，它們的值分別是我們傳入的handler以及 targetObj和false。
這個isRevoked表示是否可撤銷，生成可撤銷的proxy對象用Proxy.revocable()方法，具體可去MDN查看文檔。
上面我們創建了1個proxy對象，現在我們嘗試通過操作proxy對象來操作原對象，操作proxy對象就和操作原生對象一樣即可。(其實是proxy對象內部做了映射。)
var targetObj = {
id : 1,
name : 'pxh',
age : 20,
school : '小學'
}
var handler = {};
// 此處，我們先不對targetObj的行為進行干預，所以傳個空對象進去即可。
var proxy = new Proxy(targetObj,handler);
/**
* 1、讀取及修改屬性，可以看到原來的對象的屬性也被修改了
*/
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對象的屬性，影響原來的對象的屬性
*/
console.log(proxy.school); // 小學
console.log(targetObj.school); // 小學
delete proxy.age;
console.log(proxy.school); // undefined
console.log(targetObj.school); // undefined好，現在我們可以開始干預原來對象的行為了，具體我們通過實現以下方法達到干預對象行為的目的。
handler.apply
handler.construct 干預構造函數的new 行為
handler.defineProperty 干預對象的數據屬性或者訪問器屬性定義
handler.deleteProperty 干預對象的屬性刪除行為
handler.get 干預對象的屬性讀取行為
handler.getOwnProperty 干預對象的屬性的特征值
handler.has 干預對象的in行為(prop in obj)
handler.isExtensible
handler.ownKeys
handler.set 干預對象的屬性設置行為
...
先來干預get行為(屬性讀取行為)
var targetObj = {
id : 1,
name : 'pxh',
age : 20,
school : '小學'
}
var handler = {
// 定義get方法，get方法可以接收2個參數，分別是原來的對象及屬性
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);
/**
* 可以看到，打印順序為:
* id屬性正在被查看
* true
* 1
*/接下來把某些屬性變為 “私有” ，如不允許讀取id屬性
定義set方法，不允許修改id,name,age屬性
var targetObj = {
id : 1,
name : 'pxh',
age : 20,
school : '小學'
}
var handler = {
// 定義get方法，get方法可以接收2個參數，分別是原來的對象及屬性
get : function(target,prop){
if(prop == 'id'){
return undefined;
}
return target[prop];
},
// 定義set方法，set方法比get多1個參數，那就是該屬性修改時的值
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 = 'pxh322';
proxy.age = 23;
proxy.school = '中學'; // 這個無打印
/**
* 讀取屬性，可以看到分別打印
* undefined
* pxh
* 20
* 中學 // 這個沒有攔截，因此可以修改
*/
console.log(proxy.id);
console.log(proxy.name);
console.log(proxy.age);
console.log(proxy.school);同樣的，我們對刪除對象屬性的行為進行干預，不允許刪除id,name,age屬性。
var targetObj = {
id : 1,
name : 'pxh',
age : 20,
school : '小學'
}
var handler = {
// 在handler中定義get方法，get方法可以接收2個參數，分別是原來的對象及屬性
get : function(target,prop){
if(prop == 'id'){
return undefined;
}
return target[prop];
},
// set方法比get多1個參數，那就是該屬性修改時的值
set : function(target,prop,value){
if(prop == 'id' || prop == 'name' || prop == 'age'){
console.log(`不允許修改${prop}屬性`)
}else{
target[prop] = value;
}
},
/**
* 這個方法要求返回個boolean值，表示是否刪除成功
* 如果返回的值不是boolean值，則會進行類型轉換成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屬性，可以看到打印順序為:
* 不允許刪除id屬性
* false
*/
console.log(delete proxy.id);
/**
* 刪除school屬性，可以看到打印
* true
* undefined
*/
console.log(delete proxy.school);
console.log(proxy.school);上面我們不允許獲取對象的id值，也不可以修改和刪除，現在我們把它隱藏掉。
var targetObj = {
id : 1,
name : 'pxh',
age : 20,
school : '小學'
}
var handler = {
// 在handler中定義get方法，get方法可以接收2個參數，分別是原來的對象及屬性
get : function(target,prop){
if(prop == 'id'){
return undefined;
}
return target[prop];
},
// set方法比get多1個參數，那就是該屬性修改時的值
set : function(target,prop,value){
if(prop == 'id' || prop == 'name' || prop == 'age'){
console.log(`不允許修改${prop}屬性`)
}else{
target[prop] = value;
}
},
/**
* 這個方法要求返回個boolean值，表示是否刪除成功
* 如果返回的值不是boolean值，則會進行類型轉換成boolean值再返回
*/
deleteProperty : function(target,prop){
if(prop == 'id' || prop == 'name' || prop == 'age'){
console.log(`不允許刪除${prop}屬性`);
return false;
}else{
delete target[prop];
return true;
}
},
/**
* 通過has 方法來控制，返回值也是個boolean，表示對象是否擁有某個屬性
* 如果返回的值不是boolean值，則會進行類型轉換成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); // tru以上是“Proxy對象是什么”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
