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

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

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

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

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

• ターゲット: プロキシを作成するオブジェクト

• ハンドラー: 変更または再定義する操作を含むオブジェクト
  

const proxyObject = new Proxy(target, handler)

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

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

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

• 入手

• セット

• deleteProperty

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

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

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

ロギング

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

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 つのユースケースについて説明しましたが、必要に応じて他の内部メソッドをインターセプトすることもできます。

結論

プロキシ オブジェクトとは何か、それがどのように機能するか、およびその用途について説明しました。プロキシ オブジェクトは便利ですが、その欠点に注意する必要があります。誤って複雑さやバグを追加することを避けるために、必要な場合にのみ使用する必要があります。

このトピックはこれで終わりです。読んでいただきありがとうございます！この記事が役に立ったと思われた場合は、「いいね」を押したり、コメントしたり、他の人と共有したりすることをご検討ください。

続きを読む

• MDN プロキシ ドキュメント

• MDN リフレクト ドキュメント

以上がJavaScript でプロキシ オブジェクトを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。