JavaScript でプロキシオブジェクトを使用する方法-jsチュートリアル-php.cn

JavaScript でプロキシオブジェクトを使用する方法

Linda Hamilton

リリース： 2024-11-01 06:52:30

オリジナル

972 人が閲覧しました

JavaScript のオブジェクトは、辞書のような単純なキーと値のペアで複雑なデータを定義できる便利なデータ型です。場合によっては、JavaScript オブジェクトのデフォルトの動作方法を変更したい場合があります。ここでプロキシオブジェクトが役立ちます。この記事では、プロキシオブジェクトとは何か、プロキシオブジェクトが役立つ理由、およびその使用方法について説明します。

プロキシオブジェクトとは何ですか?

プロキシオブジェクトとは何かを理解する前に、プロキシという言葉を見てみましょう。プロキシとは、オリジナルのもののように動作しますが、オリジナルのものではないものを意味します。同様に、プロキシオブジェクトは、元のオブジェクトを使用して作成されたオブジェクトで、元のオブジェクトの動作を傍受して変更することができます。

プロキシコンストラクターは 2 つのパラメーターを受け取ります

ターゲット: プロキシを作成するオブジェクト
ハンドラー: 変更または再定義する操作を含むオブジェクト

const proxyObject = new Proxy(target, handler)

ログイン後にコピー

プロキシオブジェクトはどのように機能しますか?

変更したい操作を含むハンドラーを使用してプロキシオブジェクトを作成すると、ハンドラーはそれらの操作をインターセプトし、ターゲットオブジェクトへの呼び出しをキャッチし、それらの操作に対して定義したカスタムロジックを実行します。

操作はトラップと呼ばれ、基本的にはオブジェクトの内部メソッドです。そのうちのいくつかは次のとおりです:

入手
セット
deleteProperty

How to Use Proxy Objects in JavaScript

ここでは、プロキシオブジェクトがどのように機能するかを示す簡単なビジュアルを作成しました。値にアクセスまたは設定しようとすると、ハンドラーで定義された操作 (トラップ) がインターセプトされ、実行されます。

わかりました。プロキシオブジェクトの内容とその方法が明確であれば幸いです。次に、プロキシオブジェクトがなぜ役立つのかを示すいくつかの使用例について説明します。

プロキシオブジェクトの使用例

ロギング

オブジェクトからプロパティにアクセスするたびに情報をログに記録するシステムを作成するとします。

const platform = {
  type: "peerlist.io",
  handle: "sachin87",
};

const proxyPlatformObj = new Proxy(platform, {
  get(target, key) {
    console.log(`[Info]: Accessing ${key} at ${Date.now()}`);
    return target[key];
  },
});

// try to access the property
proxyPlatformObj.type;

// [Info]: Accessing type at 1729661722827

// 'peerlist.io'

ログイン後にコピー

これは非常に単純な使用例ですが、ログが必要な場合に便利で、拡張してより高度な処理を行うことができます。

直接利用できないプロパティにユーザーがアクセスできるようにすることもできます。たとえば、上記の場合、ユーザーハンドルを含むプラットフォームの完全な URL が必要になる場合があります。

const proxyPlatformObj = new Proxy(platform, {
  get(target, key) {
    console.log(`[Info]: Accessing ${key} at ${Date.now()}`);
    if (key === "url") {
      return `https://${target.type}/${target.handle}`;
    }
    return target[key];
  },
});

// try to access the url property
proxyPlatformObj.url;

// [Info]: Accessing url at 1729662118855
// 'https://peerlist.io/sachin87'

ログイン後にコピー

検証

もう 1 つの使用例は、値を追加する前に値をチェックすることです。たとえば、ハンドルの値を設定する前に確認したいとします。 2 つの基本条件を検証します:

小文字にする必要があります
英数字を使用できます

const proxyObject = new Proxy(target, handler)

ログイン後にコピー

Reflect.set(target, key, value) とは何なのか疑問に思われるかもしれません。これは、インターセプト可能な JavaScript オブジェクトの内部メソッドを呼び出すための静的メソッドを備えた名前空間オブジェクトです。すべてのプロパティの検証が必要ない場合は、Reflect オブジェクトを使用してデフォルトの動作を維持できます。

ロギングと検証の 2 つのユースケースについて説明しましたが、必要に応じて他の内部メソッドをインターセプトすることもできます。