jsプロキシの原理の詳細な説明

プロキシモードとは何ですか?

実例を紹介

利用者として、住宅の品質を評価する方法、住宅手続きを進める方法など、一連の面倒なことを理解する必要があるのでしょうか?当然ながら、ユーザーはこれを望んでいません。ユーザーが最も気にするのは結果です。ユーザーは家に対して要求を出し、それと同等の価値のお金を支払うことで満足のいく家を手に入れることができます。これが結果です。

では、ユーザーにとって面倒な住宅購入プロセスを誰が解決するのでしょうか?もちろん「不動産業者」です！不動産仲介業の役割は、不動産の開発、運営、消費の需給市場における取引対象物に対する評価、取引、仲介、コンサルティング等のサービスの提供、アフターサービスの提供です。

例を使ってプロキシモデルの定義を理解する

場合によっては、あるオブジェクトが別のオブジェクトを直接参照することが適切ではない、または不可能なことがあります。その場合は、プロキシオブジェクトがクライアントとターゲットオブジェクト間の仲介役として機能することがあります。

代理店モデルは、他のユーザーに対して一種のエージェントを提供することです。ユーザーは、住宅購入の具体的なプロセスを知る必要はありません。ユーザーが気にすべきことは、満足のいく結果を得る方法です。エージェントが行う必要があるのは、住宅購入のプロセスを完了することです。

プロキシとは

プロキシは多くのインターセプト操作をサポートしていますが、現在は get(target, propKey, received) と set(target, propKey, value, received) のみが記載されています。

Get メソッド: オブジェクト属性の読み取りをインターセプトします。
set メソッド: オブジェクトのプロパティの設定をインターセプトします。

get(ターゲット、propKey、レシーバー)

Proxy によってプロキシされる Person オブジェクトを定義します。外部の世界は、Proxy インスタンスオブジェクトを介して Person オブジェクトにアクセスします。

var 人 = {
    名前:「コンサム」、
    年齢: 21,
    趣味:
        「アニメを見る」
        "サイクリング"、
        「ゲームをする」
    ]
}

Proxy オブジェクトをインスタンス化して、Person オブジェクトに対する外部操作をインターセプトします。

var proxy = 新しいProxy(person, {
    get: 関数 (ターゲット、プロパティ) {
          // ターゲットとプロパティを出力して、中身を確認します。
          console.log("ターゲット = ", ターゲット);
          console.log("プロパティ = ", プロパティ);
          // 外部からアクセスされるオブジェクト属性が対象オブジェクト内に存在するかどうかを判断します。
          if (ターゲット内のプロパティ) {
                ターゲット[プロパティ]を返します。
          } それ以外 {
                // 外部からアクセスされたオブジェクト プロパティが対象オブジェクトに存在しない場合は、例外がスローされます。
                throw new ReferenceError('プロパティ "' + プロパティ + '" は存在しません。');
          }
    },
});

proxy.name 操作を実行すると、Person オブジェクトが Proxy によってプロキシされているため、Proxy インスタンスオブジェクトを介して Person に存在する属性にアクセスするたびに get メソッドが呼び出され、get メソッドがオブジェクト属性の読み取りをインターセプトします。

get: function (target, property)の2つのパラメータtargetとpropertyによって受け取られる情報は図に示されています。

プロキシオブジェクトを介して Person オブジェクト内に存在するプロパティにアクセスする場合、例外は発生しません。存在しないプロパティにアクセスするとどうなるでしょうか?

存在しないプロパティにアクセスすると例外がスローされるのはなぜですか?

これは、外部から Person オブジェクトへのアクセスは、まずプロキシによって設定されたインターセプションレイヤーを通過する必要があり、インターセプションレイヤーは外部からのアクセスをフィルターして書き換えるメカニズムを提供するためです。

// 外部からアクセスされるオブジェクト属性が対象オブジェクト内に存在するかどうかを判断します。
if (ターゲット内のプロパティ) {
    ターゲット[プロパティ]を返します。
} それ以外 {
    // 外部からアクセスされたオブジェクト プロパティが対象オブジェクトに存在しない場合は、例外がスローされます。
    throw new ReferenceError('プロパティ "' + プロパティ + '" は存在しません。');
}

if ステートメントは、外部アクセスをフィルタリングして書き換えるインターセプションレイヤーの特定の操作です。そうでない場合、存在しないプロパティにアクセスすると undefined が返されます。

set(ターゲット、propKey、値、レシーバー)

これはまだ Person オブジェクトです。ここで新しい要件があります。age 属性を変更する場合、値は 150 を超えることはできず、整数である必要があります。

Proxy オブジェクトに set メソッドを追加しました。

var proxy = 新しいProxy(person, {
    設定: 関数 (ターゲット、プロパティ、値) {
          // ターゲット、プロパティ、値を出力して、中身を確認します。
          console.log("ターゲット = ", ターゲット);
          console.log("プロパティ = ", プロパティ);
          console.log("値 = ", 値);
          if (プロパティ === "年齢") {
                if (!Number.isInteger(値)) {
                  throw new TypeError("age の値が整数ではありません!");
                }
                （値＞150）の場合{
                  throw new RangeError("年齢は150より大きくできません!");
                }
          }
    },
});

proxy.age = 100 を実行すると、set の 3 つのパラメータで受け取った情報が下図のようになります。

set メソッドは、特定の属性の割り当て操作をインターセプトするために使用されます。age の割り当て操作が条件を満たさない場合はどうなるでしょうか?

当然、例外がスローされます。

要約する

Proxy はインターセプションレイヤーです。インターセプトするオブジェクトを与えると、外部の世界はこのオブジェクトにアクセスするために、つまり Proxy のインスタンスオブジェクトにアクセスするために、まずインターセプションレイヤーを通過する必要があります。プロキシは、値の割り当て時など、外部アクセスをフィルタリングおよび書き換えるために使用されます。特定の条件を満たす必要があります。

プロキシオブジェクトには、has、deleteProperty、ownKeys、getOwnPropertyDescriptor など、さまざまな状況を傍受するために使用される他の多くのメソッドがあります。

上記はjs Proxyの原理の詳細な説明です。js Proxyの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません: