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つの手順

推薦する

JavaScript ベースで年・月・日の 3 階層連携を実現

この記事では、年、月、日の3段階のリンクを実現するためのJavaScriptの具体的なコードを参考ま...

Vue2.x - アンチシェイクとスロットリングの使用例

目次ユーティリティ: vue での使用:説明する:画像安定化:スロットル:ユーティリティ: // 手...

MIME TYPEとは?MIME-Typesタイプコレクション

MIME タイプとは何ですか? 1. まず、ブラウザがコンテンツを処理する方法を理解する必要がありま...

JavaScript 配列の詳細な概要

目次1. 配列誘導1. 文字列を配列に分割する2. コレクションとマップを新しい配列に変換する3. ...

コネクタコンポーネントから Tomcat のスレッドモデルを見る - BIO モード (推奨)

Tomcat の上位バージョンでは、デフォルト モードは NIO モードを使用することになります。...

Vue は動的な円形のパーセンテージ進捗バーを実装します

最近、小さなプログラムを開発しているときに、次の設計図のような円形のパーセンテージ進捗状況バーを実装...

シンプルなタブバー切り替えケースを実現するJavaScript

この記事では、タブバーの切り替え効果を簡単に実現するためのJavaScriptの具体的なコードを参考...

冗長カーネルを削除するLinuxディープインの実装方法

前の記事では、deepin linux に新しいカーネルを手動でインストールする方法について説明しま...

Ubuntu 18.04 (物理マシン) で OpenWRT 開発環境を構成する方法

1. 仮想マシン(物理マシン)をインストールする仮想マシンまたは物理マシンにインストールできます。 ...

Jmeterはデータベースプロセスダイアグラムに接続します

1. MySQL jdbc ドライバー (mysql-connector-java-5.1.28.j...

Vueはドラッグアンドドロップまたはクリックで写真をアップロードする機能を実装しています

この記事では、ドラッグアンドドロップやクリックによる画像のアップロードを実現するためのVueの具体的...

MySQL の選択、挿入、更新バッチ操作ステートメントのコード例

プロジェクトでは、データを操作するためにバッチ操作ステートメントが必要になることがよくあります。バッ...

Windows 10 での MySQL 8.0 のダウンロードとインストール構成のグラフィック チュートリアル

この記事では、MySQL 8.0のダウンロードとインストールについてご紹介します。具体的な内容は以下...

VMware ESXi 5.5 の展開および構成図のプロセス

目次1. インストール要件2. OSイメージのダウンロード3. VMware Workstation...

Axios の二次カプセル化の例 プロジェクトのデモ

1. なぜパッケージングを行うのですか?全体的なコード呼び出し、リクエストの公開処理、パーソナライズ...