JavaScript Proxyオブジェクトの詳細な説明

JavaScript Proxyオブジェクトの詳細な説明

1. プロキシとは何ですか?

Proxy オブジェクトは、ターゲット オブジェクトの指定された操作を傍受および変更するために使用されます。

// 構文 const p = new Proxy(target, handler)
  • target : ターゲット オブジェクト (ネイティブ配列、関数、または別のプロキシを含む、任意のタイプのオブジェクトにすることができます)。
  • ハンドラー: インターセプションとカスタム操作を実装するための関数を属性として持つオブジェクト。

2. 使い方は?

1. プロキシを使用する簡単な例

存在しないプロパティにアクセスする場合は、undefined ではなくデフォルト値を返すように設定します。

// 1. 適切なハンドラを見つけてコードを記述する const handler = {
    取得: 関数(obj, prop) {
        obj 内の prop を返します。obj[prop] : 37;
    }
};
// 2. 新しい Proxy オブジェクトを作成します。const p = new Proxy({}, handler);
// 3. 操作を実行する pa = 1;
pb = 未定義;
// 4. 結果を確認する console.log(pa, pb); // 1, undefined
console.log('c' in p, pc); // 偽、37

2. 対象オブジェクトが正しく変更されている

ターゲットを{}とします。
p = new Proxy(target, {}); とします。
pa = 37; // 操作はターゲットに転送されます console.log(target.a); // 37. 操作は正しく転送されました

3. データ検証にセットハンドラを使用する

バリデーター = {
  設定: 関数(オブジェクト、プロパティ、値) {
    (prop === '年齢')の場合{
      if (!Number.isInteger(値)) {
        throw new TypeError('年齢は整数ではありません');
      }
      (値>200)の場合{
        throw new RangeError('年齢が無効なようです');
      }
    }
    // 値を保存するデフォルトの動作
    obj[prop] = 値;
    // 成功を示します。true を返します。
  }
};
person = new Proxy({}, validator); とします。
人.年齢 = 100;
console.log(人.年齢);
// 100
person.age = '若い';
// 例外がスローされます: Uncaught TypeError: 年齢が整数ではありません
人.年齢 = 300;
// 例外をスローします: Uncaught RangeError: 年齢が無効のようです

4. 拡張コンストラクタ

関数extend(sup, base) {
  var 記述子 = Object.getOwnPropertyDescriptor(
    base.prototype、「コンストラクタ」
  );
  base.prototype = Object.create(sup.prototype);
  var ハンドラ = {
    構築: 関数(ターゲット、引数) {
      var obj = Object.create(base.prototype);
      this.apply(ターゲット、オブジェクト、引数);
      obj を返します。
    },
    適用: 関数(ターゲット、その、引数) {
      sup.apply(それ、引数);
      base.apply(それ、引数);
    }
  };
  var proxy = 新しい Proxy(base, handler);
  記述子.値 = プロキシ;
  Object.defineProperty(base.prototype、"コンストラクタ"、記述子);
  プロキシを返します。
}
var Person = 関数 (名前) {
  this.name = 名前
};
var Boy = extend(Person, 関数 (名前, 年齢) {
  this.age = 年齢;
});
Boy.prototype.sex = "M";
var Peter = new Boy("Peter", 13);
console.log(Peter.sex); // "M"
console.log(Peter.name); // "ピーター"
console.log(Peter.age); // 13

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript のプロキシ オブジェクト
  • jsプロキシの原理の詳細な説明
  • JSはあなたをプロキシの世界に深く導きます
  • JavaScript における ES6 プロキシの具体的な使用法
  • JavaScript Proxy ではどのような興味深いことができるのでしょうか?

<<:  システム外のフォント参照とトランジション効果

>>:  Linux の GRUB ブート プログラムの暗号化の概要

推薦する

このようなシェル スクリプトを使用して、多数の MySQL データベースを強制終了します (推奨)

朝早くに電話で起こされました。あるプロジェクトのデータベースがダウンしていて起動できないとのことでし...

マインスイーパゲームを実装するための jQuery プラグイン (2)

この記事では、jQueryプラグインを使用してマインスイーパゲームを実装する2番目の記事を参考までに...

WeChatアプレットで計算機機能を実装する

この記事は、WeChat アプレットを使用して作成された簡単な計算機です。興味のある方はご覧ください...

Vue.jsはシンプルなタイマー機能を実装します

この記事では、参考までに、簡単なタイマー機能を実装するためのvue.jsの具体的なコードを紹介します...

Dockerボリュームコンテナ間のデータ共有の実装

ボリュームとは何ですか?ボリュームは英語で容量を意味し、Docker ではデータ ボリューム、つまり...

IE6 での PNG アルファ透明度 (完全コレクション)

IE6 は PNG の透明度をサポートしていないと多くの人が言っています。実際、IE は 100%...

Vue3 の使用 (パート 1) Vue CLI プロジェクトの作成

目次1. 公式ドキュメント2. Vue CLIプロジェクトを作成する1. Vue CLIをインストー...

CSS フロントエンドページレンダリング最適化属性 will-change の具体的な使用法

序文スクロールやサイズ変更などのスクロール イベントがトリガーされると、トリガーの頻度が非常に高くな...

最も単純な ErrorBoundary コンポーネントをカプセル化して、React 例外を処理する

序文React 16から、子コンポーネントで発生したエラーを捕捉し、エラーログを記録し、ダウングレー...

見落とされがちなMETAタグの特殊効果(ページ遷移効果)

Web デザインで js を使用すると、多くのページ効果を実現できますが、HTML タグの META...

MySQL インストール プロンプト「詳細なヘルプについては NET HELPMSG 3534 と入力してください」の解決方法

今日、MySQL をインストールすると次のエラー メッセージが表示されます。 かなり長い時間ネットで...

Linux exa コマンド (ls よりも優れたファイル表示エクスペリエンス)

インストールREADMEに従ってインストールしてくださいドキュメントには、exa は Rust で実...

@Font-face の基本的な使い方と、すべてのブラウザと互換性を持たせる方法

@Font-face 基本紹介: @font-face は、Web ページにカスタム フォントを表示...

CSS フォーム検証機能の実装コード

レンダリング原理フォーム要素には、正規表現(携帯電話番号、メールアドレス、IDカードなど)をカスタマ...

Tomcatにデプロイされたアプリケーションがフロントエンドページにアクセスできない問題について

最近、実践的なトレーニング プロジェクトを実行する際に ssm フレームワークを使用しました。プロジ...