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

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の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • JavaScript のプロキシ オブジェクト
  • JSはあなたをプロキシの世界に深く導きます
  • JavaScript における ES6 プロキシの具体的な使用法
  • JavaScript Proxy ではどのような興味深いことができるのでしょうか?
  • JavaScript Proxyオブジェクトの詳細な説明

<<:  Windows で Graphviz をインストールして開始する方法のチュートリアル

>>:  Linux sshのデフォルトのリモートポート番号を変更する6つの手順

推薦する

HTML フォーム コンポーネントのサンプル コード

HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。次のコードは、HTM...

Node.jsとDenoの比較

目次序文Denoとは何ですか? Node.jsとの比較建築ESモジュール依存関係の管理TypeScr...

CentOS7.5 の MySQL8.0.19 のインストールチュートリアルの詳細な手順

1. はじめにこの記事には MySQL インストール部分のスクリーンショットがないので、ある程度の基...

MySQL マルチバージョン同時実行制御 MVCC の詳細な研究

MVCC MVCC (Multi-Version Concurrency Control) は、マル...

MySQL でのデータベース間クエリの例

序文MySQL では、クロスデータベース クエリは主に 2 つの状況に分けられます。1 つは同じサー...

MySQL複合クエリの詳細な説明

UNIONの使用ほとんどの SQL クエリは、1 つ以上のテーブルからデータを返す単一の SELEC...

タブ切り替えを実装するための HTML サンプル コード

タブ切り替えもプロジェクトではよく使われる技術です。一般的にタブ切り替えはjsやjqを使って実装され...

JavaScript 事前分析、オブジェクトの詳細

目次1. 事前分析1. 変数の事前解析と関数の事前解析1. 変数の事前解析2. 機能事前分析2. 事...

モバイル端末の適応に関する簡単な説明

序文フロントエンド コードの記述では、「互換性」という言葉から逃れることはできません。過去の PC ...

3つのDocker Nginxログの処理の詳細な説明

社内の同僚は Nginx ログの標準出力、つまりコンソール経由の処理を必要としているため、まずログを...

Windows Server 2012 リモート デスクトップ ライセンス サーバーがライセンスを提供できず、リモート セッションが切断される

本日、会社の内部サーバーにログインしたところ、リモートアクセスができませんでした。エラー メッセージ...

Docker 起動時の ES メモリ オーバーフローの解決方法

jvm.options ファイルを elasticsearch 構成に追加し、スタック サイズを変更...

MySQL 8.0.26 のインストールとアンインストールの完全なステップバイステップの記録

目次序文1. インストール1.公式サイトからダウンロード2. 構成を作成する3. MySQLを初期化...

要素の水平方向の中央揃えを実現する3つの方法と、固定レイアウトとフローレイアウトの概念の理解

CSS でテキストを中央揃えにするプロパティは非常に簡単に実現できます。text-align:cen...

MySQL InnoDB トランザクション ロック ソースコード分析

目次1. ロックとラッチ2. 繰り返し読み取り3. インサートロックプロセス3.1 ロックモード3....