ES6中Proxy有什么用-創(chuàng)新互聯(lián)

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

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

具體如下：

Proxy 用于修改對(duì)象某些操作的默認(rèn)行為，可以對(duì)外界的訪問進(jìn)行過(guò)濾和改寫，其概念類似于元編程。
Proxy 讓我們可以對(duì)任何對(duì)象的絕大部分行為進(jìn)行監(jiān)聽和干涉，實(shí)現(xiàn)更多的自定義程序行為。在目標(biāo)對(duì)象之前架設(shè)一層“攔截”，外界對(duì)該對(duì)象的訪問，都必須先通過(guò)這層攔截。

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

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

初識(shí)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

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

完整的使用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語(yǔ)句
   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)格模式將會(huì)報(bào)錯(cuò)
console.log(obj.name); // Lily
delete proxy.name; // 未能成功刪除，因?yàn)樯厦鎯?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實(shí)現(xiàn)和直接實(shí)現(xiàn)的效果等同

通過(guò)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ò)濾符合特定規(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 過(guò)濾了 _name
}

通過(guò)apply方法對(duì)函數(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

通過(guò)construct方法對(duì)構(gòu)造函數(shù)實(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)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

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

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

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

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

猜你還喜歡下面的內(nèi)容