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