【JavaScript】Proxyについて

今回は【JavaScript】のProxyについての備忘録です。

1: Proxyとは？

・「Proxy」とは、【プロパティの操作に、独自の処理を追加する】ためのオブジェクトです。これによりオブジェクト自体の操作に介入したり操作したりすることができます。

2:「Proxyの独自の処理」って？

・例えばProxyが発生したら「トラップ」というものを発動して、独自の処理を追加するということができます。


■トラップの独自の処理の例
・例として「setトラップ」を解説。
targetObj
handler
new Proxy
という各オブジェクトを使って、どの操作に介入するか、また介入された操作をどのように再定義するかを定義するオブジェクトです。


■set: function (target, prop, value, receiver)の引数の意味。

・第一引数のtarget ➡︎「Proxyの第一引数で渡したオブジェクトtargetObjのこと。」

・第二引数のprop ➡︎「プロパティにアクセスされた際の、プロパティの名前(プロパティaのこと)が渡ってきます。」

・第三引数は➡︎「setの場合は、新しい値が渡ってきますので【その新しい値】が第三匹数に渡ってきます。」

・第四引数のreceiver➡︎「Proxyをインスタンス化したpxy」のこと。実行元。

main.js

//⬇︎targetObjを設定する。
const targetObj = { a: 0 };

//⬇︎handlerに「setトラップ」を設定する。
const handler = {
  set: function (target, prop, value, receiver) {
    console.log(`[setトラップ]: ${prop}`);
    target[prop] = value; //⬅︎prop(targetObjのプロパティ)に新しく値(a=3など)をセットする。
  },
};

//⬇proxyをインスタンス化する。
const pxy = new Proxy(targetObj, handler);

//⬇︎pxyを実行。
pxy.a = 3; //⬅︎setトラップが発動。値3を入れた場合、値3をtargetObjに新しくセットする。

⬇︎
■ pxy.a = 3を実行すると…
[setトラップ]: aがコンソールに表示され、
targetObj(コンソール画面で左記を直接入力)には {a: 3} が
新しくSetされています。

3: proxyの使い所

①データストアにlocalStorageで保存したり、
②「内部メソッド(setやgetなど)」を間接的に呼び出す(アクセスする)ことができる【Reflect】と組み合わせて設定・取得する時
などで使うと便利でしょう。

以上、簡単にですが備忘録でした。