JavaScriptのProxyを学ぶ

proxy とは

JavaScript の Proxy オブジェクトは、あるオブジェクトのプロパティー捜査に独自の処理を追加するためのオブジェクトです。
Proxy オブジェクトは二つの引数で作成できます。第一引数は、元となるオブジェクトを入れます。第二引数は、元となるオブジェクトに対して加えたい処理定義するオブジェクトを入れます。この handler オブジェクトで定義する処理のことをトラップと呼ぶことがあります。これは文字通りターゲットとなるオブジェクトにトラップを仕掛けるイメージと近いためだと思います。
この記事では、基本的な get,set,deleteProperty の実装例を記述したいと思います。

実践

get

get ハンドラーは、値を取得するときに実行される処理です。引数としては、元オブジェクト、取得するプロパティの名称、proxy,または、proxy から継承するオブジェクトのどちらかを受け取ります。

const item = {
  tomato: 200,
  orange: 300,
};

const handler = {
  get: function (target, prop, receiver) {
    return Math.floor(target[prop] * 1.1);
  },
};

const proxy1 = new Proxy(item, handler);

console.log(proxy1.tomato); //220

上の処理ではオブジェクトから取得する値は全て消費税込みの値とする消費税込みの値とすることができます。

set

set ハンドラーは、値を設定するときに実行される処理です。引数としては、元オブジェクト、取得するプロパティの名称、設定するプロパティの新しい値、割り当てがもともと行われていたオブジェクトを受け取ります。

const item = {
  tomato: 200,
  orange: 300,
};

const handler = {
  set: function (target, prop, value) {
    if (value < 200) {
      console.log("200円よりも小さい値段は設定できません。");
      return;
    }
    target[prop] = value;
    return;
  },
};

const proxy = new Proxy(item, handler);
proxy.meet = 100;

console.log(proxy2);
//200円よりも小さい値段は設定できません。
//{ tomato: 200, orange: 300 }

上の処理では、200 円よりも小さい値段の商品を設定できないようにしています。

deleteProperty

deleteProperty ハンドラーは、値を削除された時に実行される処理です。引数としては、元オブジェクト、削除するプロパティの名前を受け取ります。

const item = {
  tomato: 200,
  orange: 300,
};

const handler = {
  deleteProperty: function (target, prop) {
    throw new Error("値は削除できません。");
  },
};
const proxy = new Proxy(item, handler);
delete proxy.tomato; //Error: 値は削除できません。

上の処理では値の削除を禁止しています。

感想

まだまだ意外と知らない JavaScript の便利機能があるので、これからも継続してまだ知らない機能を勉強してみようと思います。

参考文献

・https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy