這篇文章主要為大家展示了“ES6中Proxy有什么用”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“ES6中Proxy有什么用”這篇文章吧。

創(chuàng)新互聯(lián)主要從事成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)郎溪,10余年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792

具體如下：

Proxy 用于修改對象某些操作的默認(rèn)行為，可以對外界的訪問進(jìn)行過濾和改寫，其概念類似于元編程。

Proxy 讓我們可以對任何對象的絕大部分行為進(jìn)行監(jiān)聽和干涉，實現(xiàn)更多的自定義程序行為。在目標(biāo)對象之前架設(shè)一層“攔截”，外界對該對象的訪問，都必須先通過這層攔截。

目前【兼容性】存在一定的問題，目前在chrome和ff瀏覽器中的非嚴(yán)格模式下可用，一些先進(jìn)的技術(shù)即使在目前不能廣泛應(yīng)用，但隨著時間的流逝，都將會進(jìn)入程序員日常的編程中。

注： 博客整理時間：2018-03-24 16:21:15

初識Proxy

var obj = {name:'Joh'};
var proxy = new Proxy(obj, {
 get (target, key) {
  return 'test1';
 },
 set (target, key, value) {
  target[key] = value
 }
});
console.log(proxy.name); // test1 進(jìn)行g(shù)et取值
proxy.name = 'test2'; // 進(jìn)行set設(shè)置
console.log(obj.name); // test2

通過Proxy對象進(jìn)行攔截target對象的屬性

完整的使用Proxy進(jìn)行設(shè)置, 獲取，修改和刪除的案例

var obj = {name:'Joh',group:'g1',_type:'student'};
var proxy = new Proxy(obj, {
 get (target, key) {
  if(key[0]!== '_') {
   // return Reflect.get(target,key); // 效果等同于下面的return語句
   return target[key];
  };
 },
 set (target, key, value) {
  if(key[0]!== '_') {
   // Reflect.set(target,key,value);
   return target[key] = value;
  }
 },
 deleteProperty(target, key) {
  // 業(yè)務(wù)邏輯
  if(key[0] !== '_') {
   // Reflect.deleteProperty(target, key);
   delete target[key];
  }
 }
});
console.log(proxy.name); // Joh
console.log(obj.name); // Joh
proxy.name = 'Lily'; // 在非嚴(yán)格模式下的賦值操作，嚴(yán)格模式將會報錯
console.log(obj.name); // Lily
delete proxy.name; // 未能成功刪除，因為上面內(nèi)部有判斷
console.log(obj.name); // undefined 成功刪除
delete proxy.group;
console.log(obj.group); // undefined 成功刪除
delete proxy._type;
console.log(obj._type); // student
proxy.color='red';
console.log(obj.color); // red

其中借助Reflect實現(xiàn)和直接實現(xiàn)的效果等同

通過has方法和in關(guān)鍵字進(jìn)行攔截的示例：

var obj = {name:"Joh",_name:"Lily"};
var proxy = new Proxy(obj, {
 has(target, key) {
  if(key[0] === '_'){
   return false;
  } else {
   return key in target;
  }
 }
});
console.log('has name attr: ', 'name' in proxy); // has name attr: true
console.log('has _name attr: ', '_name' in proxy); // has _name attr: false

使用ownKeys方法與for-in遍歷過濾符合特定規(guī)則屬性的示例

var obj = {name:"Joh",_name:"Lily", age:10, group:"g1"};
var proxy = new Proxy(obj, {
 ownKeys (target) {
  return Reflect.ownKeys(target).filter(key => key[0] !== '_');
 }
});
for(var k in proxy) {
 console.log(k); // 分別輸出 name age group 過濾了 _name
}

通過apply方法對函數(shù)調(diào)用的攔截

function test() {
 console.log('hello world');
}
var proxyFun = new Proxy(test,{
 apply(target,ctx,args) {
  console.log('proxy apply');
  return Reflect.apply(target,ctx,args);
 }
});
proxyFun(); // 分別輸出 proxy apply 和 hello world
// proxyFun.apply(); // 同樣，分別輸出 proxy apply 和 hello world
// proxyFun.call(); // 同樣，分別輸出 proxy apply 和 hello world

通過construct方法對構(gòu)造函數(shù)實例化的攔截

function User() {
 console.log('this is a contructor');
}
var ClassProxy = new Proxy(User, {
 construct(target,args) {
  console.log('proxy construct');
  return Reflect.construct(target,args);
 }
});
new ClassProxy(); // 分別輸出 proxy construct 和 this is a contructor

以上是“ES6中Proxy有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享題目：ES6中Proxy有什么用-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://chinadenli.net/article38/popsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、定制網(wǎng)站、網(wǎng)站改版、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)