快捷導(dǎo)航

ES6知識點(diǎn)整理之Proxy的應(yīng)用實(shí)例詳解

更新時間：2019年04月16日 08:46:38 作者：Johnny丶me

這篇文章主要介紹了ES6知識點(diǎn)整理之Proxy的應(yīng)用,結(jié)合實(shí)例形式詳細(xì)分析了ES6中Proxy的功能、原理、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了ES6知識點(diǎn)整理之Proxy的應(yīng)用。分享給大家供大家參考，具體如下：

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

Proxy 讓我們可以對任何對象的絕大部分行為進(jìn)行監(jiān)聽和干涉，實(shí)現(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)格模式將會報(bào)錯
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)的效果等同

通過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ù)實(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

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: