JavaScriptのプロキシを理解し、APIを反映します

プロキシおよび反射APIは、JavaScriptで使用される強力なツールであり、オブジェクト操作を傍受およびカスタマイズします。 1。ターゲットオブジェクトのラップと「トラップ」を定義することにより、GETなどの操作をブロックし、ログ、検証、読み取り専用コントロールなどの関数を実装します。 2。反射は、デフォルトの動作の一貫性と正しさを確保し、コードメンテナビリティを改善するために、プロキシトラップに対応するメソッドを提供します。 3.実際のアプリケーションには、VUE 3レスポンシブシステム、データ検証、デバッグログ、不変のオブジェクト、APIシミュレーションが含まれます。 4.パフォーマンスオーバーヘッド、組み込みのオブジェクトの複雑な動作、この結合の問題、およびネストされたオブジェクトを再帰的にプロキシ化する必要があります。 5.合理的な使用は、効率的でデバッグ可能なリアクティブシステムを構築できますが、コードを理解しにくくするために、過度の使用を避ける必要があります。

JavaScriptのProxyとReflect APIは、ES6に導入された強力な機能であり、開発者が基本的なオブジェクト操作を傍受してカスタマイズできるようにします。それらは毎日使用されないかもしれませんが、それらを理解することでオブジェクトの動作をより深く制御し、検証、ロギング、リアクティブプログラミングなどの高度なパターンを可能にします。

プロキシAPIとは何ですか？

Proxy使用すると、プロパティの読み取り、値の書き込み、プロパティが存在するかどうかなどの基本操作を傍受および再定義できるオブジェクトの周りにラッパーを作成できます。それをオブジェクトの「ゲートキーパー」と考えてください。

基本的な構文：

 const proxy = new Proxy（ターゲット、ハンドラー）;

• target ：ラップする元のオブジェクト。
• handler ：インターセプトする操作（「トラップ」と呼ばれる）を定義するオブジェクト。

例：ロギングプロパティアクセス

const user = {name： 'alice'、age：30};

const proxy = new Proxy（user、{
  get（ターゲット、プロパティ）{
    console.log（ `getting property：$ {property}`）;
    ターゲットを返す[プロパティ];
  }、
  セット（ターゲット、プロパティ、値）{
    console.log（ `設定プロパティ：$ {property} = $ {value}`）;
    ターゲット[プロパティ] =値;
    trueを返します。 //成功した割り当てのためにtrueを返す必要があります
  }
}）;

proxy.name; //ログ：プロパティの取得：名前
proxy.age = 31; //ログ：プロパティの設定：年齢= 31

これは、デバッグ、検証、または観測可能性の構築に役立ちます。

一般的なプロキシトラップ

ハンドラーで頻繁に使用されるトラップを次に示します。

• get(target, property) - プロパティ読み取りをインターセプトします。
• set(target, property, value) - プロパティの書き込みを傍受します。
• has(target, property) - オペレーターinインターセプト（例： 'name' in obj ）。
• deleteProperty(target, property) - Intercepts delete obj.prop 。
• apply(target, thisArg, args) - ラッピング機能に使用します。
• construct(target, args) - newオペレーターをインターセプトします。

例： setトラップによる検証

const validatedUser = new Proxy（{}、{
  セット（ターゲット、プロパティ、値）{
    if（property === 'age' && typeof value！== 'number'）{
      新しいTypeErrorを投げる（ '年齢は数字でなければならない'）;
    }
    if（property === 'name' && typeof value！== 'string'）{
      新しいTypeRror（ '名前は文字列でなければなりません'）;
    }
    ターゲット[プロパティ] =値;
    trueを返します。
  }
}）;

validateduser.name = 'bob'; // わかりました
validatedUser.age = 'thirty'; // TypeRrorをスローします

これにより、オブジェクトレベルでデータの整合性を実施できます。

反射APIとは何ですか？

Reflect 、JavaScript操作を傍受する方法を提供する組み込みオブジェクトです。 Proxyと協力するように設計されています。プロキシトラップごとに、対応するReflect方法があります。

get trapでtarget[property]に手動でアクセスする代わりに、 Reflect.get()を使用します。デフォルトの動作を一貫性を保ち、エッジケースを処理します。

なぜ反射を使用するのですか？

• コードを清潔で予測可能に保ちます。
• thisバインディングを正しく処理します。
• オブジェクト操作を実行する機能的な方法を提供します。

反射を使用したプロキシの改善：

 const safeobject = new Proxy（{value：42}、{
  get（ターゲット、プロパティ）{
    console.log（ `アクセス：$ {property}`）;
    return Reflect.get（ターゲット、プロパティ）;
  }、
  セット（ターゲット、プロパティ、値）{
    console.log（ `mutating：$ {property}`）;
    return Reflect.set（ターゲット、プロパティ、値）;
  }
}）;

Reflectを使用すると、明示的に上書きされない限り、プロキシがJavaScriptのデフォルト動作を尊重することが保証されます。

実際のユースケース

これらのAPIは単なるアカデミックではありません。実際のツールとフレームワークで使用されています。

• VUE 3の反応性システム： Proxyを使用してプロパティアクセスと更新を検出し、 Object.definePropertyを置き換えます。
• 検証ライブラリ：タイプまたは範囲のチェックを実施するためのオブジェクトをラップします。
• デバッグとロギング：元のコードを変更せずにオブジェクトの相互作用を監視します。
• 不変のラッパー： setトラップにエラーを投げることにより、偶発的な突然変異を防ぎます。
• APIモッキング：動的な応答でオブジェクトをシミュレートします。

例：読み取り専用プロキシ

関数readonly（ターゲット）{
  新しいプロキシを返します（ターゲット、{
    セット（） {
      新しいエラーをスローします（「読み取り専用オブジェクトを変更できません」）;
    }、
    deleteproperty（）{
      新しいエラーをスローします（「読み取り専用オブジェクトから削除できません」）;
    }
  }）;
}

const config = readonly（{api： 'https://api.example.com'}）;
config.api = 'hacked'; //エラーをスローします

ゴッチャとベストプラクティス

• パフォーマンス：プロキシはオーバーヘッドを追加します。必要でない限り、大きなオブジェクトを包んではいけません。
• すべてのオブジェクトを平等にプロキシできるわけではありません。配列のような組み込みオブジェクトには、微妙な動作があります。
• 使用することは一貫してReflect 。トラップがより信頼性が高く、メンテナンスが容易になります。
• プロキシは、外側のオブジェクトをラップするだけです。ネストされたオブジェクトは、再帰的にプロキシでない限り、自動的に保護されていません。

最終的な考え

JavaScriptのメタプログラミング機能を開いてProxyとReflect 。過剰使用はコードを従うのを難しくすることができますが、それらはきれいな抽象化、デバッグツール、およびリアクティブなシステムを構築するために非常に貴重です。

賢く使用されて、彼らはあなたが強力で表現力のある両方のコードを書くことができます。

基本的に、 Proxyの動作を観察、制御、または強化する必要がある場合はReflect到達するツールです。

以上がJavaScriptのプロキシを理解し、APIを反映しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。