148.Proxyについて

Proxyオブジェクトの使いどころ

1.あるオブジェクトがありました
2.そのオブジェクトに対して『独自の処理』をしたい場合に使用する。
つまり、既存のオブジェクトのメソッドの機能を拡張したい時に使う

できること

1.メンバーに登録されていないプロパティを読んだ時に返される値を設定
2.ログを出力したり
3.プロパティに新しい値を書き込むなど、正しい値かチェックする、、など
『いつも通り、プロパティやメソッドを呼び出した時に追加で何かしてほしい時に使う』
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps

イメージできるかわかりませんが
遊戯王で、『トラップカード発動！』ってありますが
攻撃すると呼び出されるという認識で、『トラップ』する。と呼びます。

実装方法

1.通常通りオブジェクトを生成
2.オブジェクトとは別にハンドラーを作成
3.トラップ名:関数(指定の引数)を加える
4.インスタンスを生成する
5.インスタンスにアクセスすることにより実行される

//1.通常通りオブジェクトを生成
const targetObj = { a: 0 };
//2.オブジェクトとは別にハンドラーを作成
const handler = {
//3.トラップ名:関数(指定の引数)を加える
  set: function(target, prop, value, receiver) {
    console.log(`[set]: ${prop}`);
    // target[prop] = value;
    throw new Error('cannot add prop.');
  },
  get: function(target, prop, receiver) {
    console.log(`[get]: ${prop}`);
    if(target.hasOwnProperty(prop)) {
      return target[prop];
    } else {
      return -1;
    }
  },
  deleteProperty: function(target, prop) {
    console.log(`[delete]: ${prop}`);
    delete target[prop];
  },
}
//4.インスタンスを生成する
const pxy = new Proxy(targetObj, handler);
//5.インスタンスにアクセスすることにより実行される
// pxy.a = 1;
console.log(pxy.b);
delete pxy.a;