こんにちは。イノベーター・ジャパン（以下、IJ）のエンジニアのbmfです。

今回はProxyについて書きます。

ProxyはECMAScript 2015から追加されたオブジェクトで、オブジェクトが持つ機能をラップすることにより、オブジェクトの機能をカスタマイズすることができます。

Proxyの関連用語

Proxyを知る上で必要な用語です。

handler ・・・トラップを入れるためのオブジェクトで、プレースホルダ的な扱いをされます。

trap ・・・Proxyがプロパティへのアクセスを実装するためのメソッド。

target ・・・プロキシするオブジェクト。

invariant ・・・オブジェクトの機能をカスタマイズした時に変更しない不変的な条件のこと。

Proxyの使い方

基本的な構文は以下の通りです。

let proxy = new Proxy(target, handler);

targetにはラップしたいオブジェクトまたは関数を定義します。

handlerには関数をプロパティとして持つオブジェクトを定義します。オブジェクトに定義された関数がProxyの操作が行われた時の挙動となります。 handlerの中でラップ前に本来の挙動を呼び出したい時はReflectというオブジェクトを呼び出します。

例

オブジェクトに渡された値にバリデーションをかけるような簡単な例です。

const handler = {
  get: function(target, prop) {
    if (target[prop] === 'foo') {
      return target[prop];
    }

    return 'Default Value';
  }
};

const proxy = new Proxy({}, handler);
proxy.foo = 'foo';
proxy.bar = 'bar';

console.log(proxy.foo); // foo
console.log(proxy.bar); // Default Value