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

推薦する

React Router 5.1.0 はページジャンプナビゲーションを実装するために useHistory を使用します

目次1. withRouterコンポーネントを使用する2. ルートタグを使用するReactRoute...

CSSスクロールバースタイル設定の実装

Webkit スクロールバー スタイルのリセット1. スクロールバーには、スクロールバー ボタンとト...

JavaScript クリップボードの使用法の詳細な説明

(1)はじめに: clipboard.js は、テキストをクリップボードにコピーする機能を実装する軽...

Docker x509 の安全でないレジストリ問題を解決する

Docker をインストールした後、会社が構築したプライベート サーバー Harbor からプルしよ...

CSS グリッドレイアウトの完全ガイド

Grid は 2 次元のグリッド レイアウト システムです。これを使用すると、本質的にはハック メソ...

MySQL を解凍してインストールおよび完全に削除する方法の詳細なグラフィック説明

1. MySQLをインストールする(1)ダウンロードしたMySQLの圧縮ファイルをMySQLをインス...

CentOS 7.4 にソースコードから MySQL 8.0 をインストールするための詳細なチュートリアル

目次1. 環境2. 準備3. MySQL 8.0.11をインストールするMySQL 8 の公式バージ...

MySQL ルートパスワードを変更する複数の方法 (推奨)

方法1: SET PASSWORDコマンドを使用する MySQL -u ルート mysql> ...

エレガントなJSコードの書き方

目次変数意味があり発音しやすい変数名を使用する同じ型の変数には同じ語彙を使用する検索可能な名前を使用...

要素 UI に基づいてクエリ コンポーネントを段階的にカプセル化する方法

目次関数基本的なクエリ関数クエリ条件の初期化ページのレンダリングクエリと表示の最適化をさらに強化プル...

主キーを追加または変更するMySQL SQL文操作

テーブルフィールドを追加する テーブルtable1を変更し、トランザクタvarchar(10)をNu...

HTML チュートリアル: HTML 水平線分

<br />このタグを使用すると、画面上に水平線を表示して、ページのさまざまな部分を区切...

MySQLでユーザーを作成し、ユーザーに権限を付与する方法の詳細なチュートリアル

目次ユーザー管理新しいユーザーを作成するユーザー名の変更ユーザーのパスワードを設定するルートパスワー...

CSS3で作られたレインボーボタンスタイル

結果: 実装コード: html <div class="buttons"&...