ES6中Proxy有什么用

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

具體如下：

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

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

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

注： 博客整理時間：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 進行get取值
proxy.name = 'test2'; // 進行set設置
console.log(obj.name); // test2

通過Proxy對象進行攔截target對象的屬性

完整的使用Proxy進行設置, 獲取，修改和刪除的案例

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) {
  // 業務邏輯
  if(key[0] !== '_') {
   // Reflect.deleteProperty(target, key);
   delete target[key];
  }
 }
});
console.log(proxy.name); // Joh
console.log(obj.name); // Joh
proxy.name = 'Lily'; // 在非嚴格模式下的賦值操作，嚴格模式將會報錯
console.log(obj.name); // Lily
delete proxy.name; // 未能成功刪除，因為上面內部有判斷
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實現和直接實現的效果等同

通過has方法和in關鍵字進行攔截的示例：

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遍歷過濾符合特定規則屬性的示例

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方法對函數調用的攔截

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方法對構造函數實例化的攔截

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有什么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！