JavaScript でのプロキシの使用を理解するための記事

エージェントとは何か

MDN での定義: プロキシオブジェクトは、基本操作 (プロパティの検索、割り当て、列挙、関数呼び出しなど) のカスタム動作を定義するために使用されます。

公式の定義はいつも非常にわかりにくく退屈ですが、Proxy は具体的に何ができるのでしょうか?

1. エージェントの概念はメタプログラミングに由来します。メタプログラミングは、読み取り、変更、分析、さらには新しいプログラムの生成もできる一種のプログラムです。 JS は、Proxy と Reflect という 2 つのオブジェクトを通じて JS メタプログラミングを実行できます。！

2. プロキシはプロキシです。オブジェクトへのアクセスが不便な場合や、単純なアクセスでは満足できない場合、プロキシは「仲介者」として機能し、オブジェクトの操作をより適切に制御するのに役立ちます。！

プロキシの基礎知識

文法：

定数ハンドラ = {};
let target = {}; //ターゲット オブジェクト let userProxy = new Proxy(target,handler); //プロキシが正常に実装されました。 ！
ユーザープロキシ.a = 1;
コンソールログ(ターゲットa);//1
console.log(target == userProxy); //false

target : Proxyでラップされるターゲットオブジェクト

ハンドルr: 通常は属性として関数を持つオブジェクトで、各属性の関数はさまざまな操作を実行するときのエージェントの動作を定義します。

わかりました！おめでとうございます。プロキシの定義をマスターしました。

使用時には、ハンドラ内のプロキシ動作のコードにもっと注意を払う必要があります。これにより、プロキシをより適切に使用できるようになります。

ハンドラオブジェクトのメソッド

定数ハンドラ = {
	get(ターゲット、プロパティ、レシーバー){
		console.log('取得!');
		'a' を返します。
	}
}
ターゲットを{name:'tar'}とします。
userProxy = new Proxy(target,handler); とします。
ユーザープロキシ名

もちろん、他にも多くの方法があります。MDNの「ハンドラーオブジェクトのメソッド」を参照してください。

プロキシでできること

プロパティアクセスの追跡

オブジェクトがいつアクセスまたは変更されたかを知る必要がある場合。

 ターゲット = {
	名前:'ww'
	}
 const ハンドラ = {
    get(tar, prop){
     	コンソールログを取得します。
     	Reflect.get(...引数) を返します。 
     },
     set(tar,prop){
		コンソールログに'設定'と入力します。
		Reflect.set(...引数) を返します。
	 }
  }
  userProxy = new Proxy(target, handlers); とします。
  ユーザープロキシ名;
  ユーザープロキシ名 = 'wqw';

オブジェクトのプロパティが未定義である問題を解決する

ターゲットを{}とします
  ハンドラを = {
    取得: (ターゲット、プロパティ) => {
      target[property] = (ターゲット内のプロパティ) ? target[property] : {}
      if (typeof target[property] === 'object') {
        新しいProxy(target[property], handlers)を返す
      }
      ターゲット[プロパティ]を返す
    }
  }
  proxy = new Proxy(ターゲット、ハンドラ) を作成します。
  console.log('z' in proxy.xy) // false (実際、このステップでは `target` の xy 属性が作成されています)
  proxy.xyz = 'こんにちは'
  console.log(proxy.xy の 'z') // true
  console.log(target.xyz) // こんにちは

get をプロキシし、その中で論理処理を実行します。取得したい値が存在しないキーからのものである場合は、target 内に対応するキーを作成し、このキーのプロキシオブジェクトを返します。

これにより、値取得操作でcan not get xxx from undefinedがスローされなくなります。

ただし、これには小さな欠点があります。つまり、キーが存在するかどうかを実際に判断したい場合、in 演算子を使用してのみ判断でき、get を介して直接判断することはできません。