Proxy(代理) 是 ES6 中新增的一個特性。Proxy 讓我們能夠以簡潔易懂的方式控制外部對物件的訪問。其功能非常類似於設計模式中的代理模式。

使用 Proxy 的好處是：物件只需關注於核心邏輯，一些非核心的邏輯（如：讀取或設定物件的某些屬性前記錄日誌；設定物件的某些屬性值前，需要驗證；某些屬性的訪問控制等）可以讓 Proxy 來做。從而達到關注點分離，降級物件複雜度的目的。

使用方法

var p = new Proxy(target, handler);

其中，target 為被代理物件。handler 是一個物件，其聲明瞭代理 target 的一些操作。p 是代理後的物件。

當外界每次對 p 進行操作時，就會執行 handler 物件上的一些方法。handler 能代理的一些常用的方法如下：

• get：讀取
• set：修改
• has：判斷物件是否有該屬性
• construct：建構函式
• ...

看如下的 demo

var target = {
   name: 'obj'
 };
 var logHandler = {
   get: function(target, key) {
     console.log(`${key} 被讀取`);
     return target[key];
   },
   set: function(target, key, value) {
     console.log(`${key} 被設定為 ${value}`);
     target[key] = value;
   }
 }
 var targetWithLog = new Proxy(target, logHandler);
 targetWithLog.name; // 控制檯輸出：name 被讀取
 targetWithLog.name = 'others'; // 控制檯輸出：name 被設定為 others
console.log(target.name); // 控制檯輸出: others
 

在上面的 demo 中，

• targetWithLog 讀取屬性的值時，實際上執行的是 logHandler.get ：在控制檯輸出資訊，並且讀取被代理物件 target 的屬性。
• 在 targetWithLog 設定屬性值時，實際上執行的是 logHandler.set ：在控制檯輸出資訊，並且設定被代理物件 target 的屬性的值。

下面介紹更多的 Demo。

實現虛擬屬性

下面的 demo，虛擬了 fullName 這個屬性。

var person = {
  fisrsName: '張',
  lastName: '小白'
};
var proxyedPerson = new Proxy(person, {
  get: function (target, key) {
    if(key === 'fullName'){
      return [target.fisrsName, target.lastName].join(' ');
    }
    return target[key];
  },
  set: function (target, key, value) {
    if(key === 'fullName'){
      var fullNameInfo = value.split(' ');
      target.fisrsName = fullNameInfo[0];
      target.lastName = fullNameInfo[1];
    } else {
      target[key] = value;
    }
  }
});

console.log('姓:%s, 名:%s, 全名: %s', proxyedPerson.fisrsName, proxyedPerson.lastName, proxyedPerson.fullName);// 姓:張, 名:小白, 全名: 張 小白
proxyedPerson.fullName = '李 小露';
console.log('姓:%s, 名:%s, 全名: %s', proxyedPerson.fisrsName, proxyedPerson.lastName, proxyedPerson.fullName);// 姓:李, 名:小露, 全名: 李 小露
console.log('**********');
 

實現私有變數

下面的 demo 實現了真正的私有變數。代理中把以 _ 開頭的變數都認為是私有的。

var api = {
  _secret: 'xxxx',
  _otherSec: 'bbb',
  ver: 'v0.0.1'
};

api = new Proxy(api, {
  get: function(target, key) {
    // 以 _ 下劃線開頭的都認為是 私有的
    if (key.startsWith('_')) {
      console.log('私有變數不能被訪問');
      return false;
    }
    return target[key];
  },
  set: function(target, key, value) {
    if (key.startsWith('_')) {
      console.log('私有變數不能被修改');
      return false;
    }
    target[key] = value;
  },
  has: function(target, key) {
    return key.startsWith('_') ? false : (key in target);
  }
});

api._secret; // 私有變數不能被訪問
console.log(api.ver); // v0.0.1
api._otherSec = 3; // 私有變數不能被修改
console.log('_secret' in api); // true
console.log('ver' in api); // false

抽離校驗模組

下面的 demo 實現了在代理中實現設定屬性值前做驗證。

function Animal() {
  return createValidator(this, animalValidator);
}
var animalValidator = {
  name: function(name) {
    // 動物的名字必須是字串型別的
    return typeof name === 'string';
  }
};

function createValidator(target, validator) {
  return new Proxy(target, {
    set: function(target, key, value) {
      if (validator[key]) {
        // 符合驗證條件
        if (validator[key](value)) {
          target[key] = value;
        } else {
          throw Error(`Cannot set ${key} to ${value}. Invalid.`);
        }
      } else {
        target[key] = value
      }
    }
  });
}

var dog = new Animal();
dog.name = 'dog';
console.log(dog.name);
dog.name = 123; // Uncaught Error: Cannot set name to 123. Invalid.

參考

• MDN Proxy
• 例項解析 ES6 Proxy 使用場景

本文遵守創作共享CC BY-NC-SA 4.0協議
網路平臺如需轉載必須與本人聯絡確認。

作者：九彩拼盤
連結：https://www.jianshu.com/p/34f0e6abe312
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。