JavaScript プロキシと Reflect API をマスターする (苦労せずに)

目次

1. はじめに
2. JavaScript プロキシはどうなるのでしょうか?
   • 実際の例: オブジェクトの変更を追跡する (簡単な方法)
3. プロキシを使用したい場合
   • データ検証は正しく行われています
   • リアクティブ オブジェクトの構築 (はい、Vue はこれを行います)
   • Lazy オブジェクト: 必要なものだけを作成
4. わかりました。でも、リフレクトはどうでしょうか
5. プロキシとリフレクトがいかに完璧な組み合わせであるか
   • 実際の例: Style
   を使用したログ記録
6. プロキシとリフレクトが気に入る理由
7. まとめ

導入 ？

JavaScript のおそらく最も過小評価されている (そして十分に活用されていない) 2 つの機能、プロキシとリフレクトについて話しましょう。わかります - おそらく聞いたことはあるでしょうし、Google で 1 回か 2 回検索したこともあると思いますが、少し特別なもののように思えますよね?

しかし、問題は次のとおりです。これらのツールを使用すると、オブジェクトに対するまったく新しいレベルの制御が可能になり、使用は思っているほど難しくありません。この投稿を最後まで読むと、それらがどのように機能するか、なぜ優れているのか、そして実践的な現実世界のシナリオのためにツールボックスに追加する方法が正確にわかるようになります。

さあ、飛び込みましょう!

JavaScript プロキシはどうなるのでしょうか?

JavaScript のプロキシは、究極の仲介者のようなものです。これにより、オブジェクトとの対話方法をインターセプトしてカスタマイズできます。誰かがプロパティにアクセス、変更、または削除しようとしたときに何が起こるかを制御できます。そして一番いいところは？使い方はとても簡単です。

次のように考えてください。オブジェクト (ユーザー プロフィールなど) を持っていて、そのオブジェクトをいじる人が何かおかしなこと (年齢を「意味不明」に設定するなど) をしないようにしたいとします。プロキシを使用すると、すぐに参加して制御を取得できます。

基本的な構文は次のとおりです:

let proxy = new Proxy(target, handler);

• ターゲット: 元のオブジェクト (ラップしているオブジェクト)。
• ハンドラー: プロパティの読み取り、書き込み、削除などの操作をインターセプトする関数 (トラップと呼ばれる) を持つオブジェクト。

実際の例: オブジェクトの変更を追跡する (簡単な方法)

共同編集アプリを構築していて、誰かがドキュメントを更新するたびにそれを知りたいとします。プロキシを使用すると非常に簡単です:

const documentModel = { title: "Draft", content: "Hello World" };

const handler = {
  set(target, prop, value) {
    console.log(`Property ${prop} is changing from ${target[prop]} to ${value}`);
    target[prop] = value;
    return true;
  }
};

const documentProxy = new Proxy(documentModel, handler);

documentProxy.title = "Final Draft"; // Logs: Property title is changing from Draft to Final Draft

ドキュメントが変更されるたびに、何が起こったかを正確に示す小さなログが得られます。ここでは驚くべきことではありません。

プロキシを使用したい場合

それでは、実際にプロキシを使用する必要があるのはどのような場合でしょうか?素晴らしい質問です。これが本当に輝くシナリオをいくつか紹介します:

データ検証は正しく行われます

プロキシを使用してデータ検証ルールを適用できます。無効なデータがアプリに忍び込んで後で問題を引き起こすことはもうありません。

const person = { name: "", age: 0 };

const handler = {
  set(target, prop, value) {
    if (prop === "age" && typeof value !== "number") {
      throw new TypeError("Age must be a number");
    }
    target[prop] = value;
    return true;
  }
};

const personProxy = new Proxy(person, handler);
personProxy.age = 30; // All good
personProxy.age = "thirty"; // Throws an error

これで、拡張可能な優れた検証が得られ、大量の定型コードを記述する必要がなくなりました。いいですね！

リアクティブ オブジェクトの構築 (はい、Vue はこれを行います)

Vue を使ったことがある人なら、プロキシが実際に動作しているのを見たことがあるでしょう。 Vue はプロキシを使用してデータをリアクティブにし、データが変更されると UI を自動的に更新します。

プロキシを使用すると、オブジェクトの変更を監視し、リアルタイムで反応できます。独自のリアクティブ システムやダッシュボードを構築するのに最適です。

Lazy オブジェクト: 必要なものだけを作成する

プロキシを使用すると、実際に必要になるまで高価なオブジェクトの作成を延期できます。これは遅延初期化と呼ばれます。すべてのデータを事前にロードするのではなく、必要なときに必要なものだけを取得します。

さて、しかし、Reflect についてはどうでしょうか?

Reflect API は Proxy の最良の相棒のようなものです。 Proxy では操作をインターセプトできますが、Reflect では、より標準化された方法でそれらの操作を操作するためのツールが提供されます。これにより、オブジェクト操作 (プロパティの設定や取得など) をよりクリーンかつ予測どおりに処理できるようになります。

Reflect を使用してデフォルトのオブジェクトの動作を操作する方法は次のとおりです:

const user = { name: "Alice", age: 25 };

console.log(Reflect.get(user, "name")); // Alice
Reflect.set(user, "age", 30); // Sets age to 30

なぜわざわざ Reflect を使うのでしょうか?コードが読みやすくなり、一貫性が高まります。何もカスタムしたくない場合は、プロキシと併用してデフォルトの動作を処理できます。

プロキシとリフレクトがいかに完璧な組み合わせであるか

プロキシとリフレクトを組み合わせてみましょう。ログを追加したいが、オブジェクト操作を通常どおり処理したい場合は、Reflect が最適です。以下は、プロパティがアクセスまたは変更されたときにログを記録しますが、実際の作業は Reflect に委任する例です。

const product = { name: "Laptop", price: 1000 };

const handler = {
  set(target, prop, value) {
    console.log(`Setting ${prop} to ${value}`);
    return Reflect.set(target, prop, value);
  },
  get(target, prop) {
    console.log(`Getting ${prop}`);
    return Reflect.get(target, prop);
  }
};

const productProxy = new Proxy(product, handler);
productProxy.price = 1200; // Logs: Setting price to 1200
console.log(productProxy.price); // Logs: Getting price, Output: 1200

一番良かった点は?動作 (ログ) をカスタマイズできますが、プロパティの設定と取得の実際のロジックは Reflect が処理します。これにより、物事がシンプルかつ予測可能になります。

Pourquoi vous allez adorer Proxy et réfléchir

Voici pourquoi ces outils sont géniaux :

• Flexibilité : vous pouvez contrôler le comportement des objets, que vous ajoutiez une validation, une journalisation ou un chargement différé.
• Abstractions puissantes : avec les proxys, vous pouvez masquer une logique complexe et lui donner l'impression d'être magique. Combinez cela avec Reflect et vous obtenez le contrôle et la sécurité.
• Code plus propre : au lieu de pirater des cas extrêmes ou d'écrire des tonnes de conditions, les proxys vous permettent d'intercepter le comportement de manière propre et réutilisable.
• Meilleure DX (Developer Experience) : moins de passe-partout, moins de surprises, plus de contrôle. Qu'est-ce qu'il ne faut pas aimer ?

Envelopper le tout

Et voilà ! Les proxys et Reflect peuvent sembler un peu intimidants au début, mais une fois que vous les maîtrisez, ils peuvent améliorer considérablement votre code. Que vous souhaitiez valider des données, suivre les modifications d'objets ou simplement vouloir plus de contrôle sur le comportement des objets, ces outils sont là pour vous faciliter la vie.

Alors n'hésitez plus, essayez-les ! Vous pourriez bien vous retrouver à recourir à Proxy et Reflect dans votre prochain projet.

以上がJavaScript プロキシと Reflect API をマスターする (苦労せずに)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。