JavaScript でプロパティハイジャックを実装する方法 defineProperty

obj = {} とします。
// 共通操作: 新しい属性を追加/変更 obj.a = 1;
// は次のものと同等です:
オブジェクト.defineProperty(o, "a", {
  値: 1,
  書き込み可能: true、
  設定可能: true、
  列挙可能: true
});

obj = {} とします。

値を 1 にします。
オブジェクト.defineProperty(obj, "b", {
  得る（） {
    console.log("b 属性を読み取りました", 値);
    戻り値;
  },
  set(新しい値) {
    console.log("b プロパティを設定", newValue);
    値 = 新しい値;
  }
});
// get 関数をトリガーします。get の戻り値は属性値です // 1
コンソールにログ出力します。
// 設定関数をトリガーすると、値が 2 になります。注意してください。 ！ ！このとき、メモリ内の属性値は変更されていません。obj.b = 2;
// ただし、プロパティ値を読み取りたい場合、必然的に get 関数がトリガーされ、プロパティ値が自然に変化します。このアイデアは本当に優れています console.log(obj.b);

関数 observeKey(obj, key) {
  値をobj[キー]とします。
  Object.defineProperty(obj, キー, {
    得る（） {
      console.log("プロパティを読み取り", 値);
      戻り値;
    },
    set(新しい値) {
      console.log("プロパティを設定する", newValue);
      値 = 新しい値;
    }
  });
}
obj = {a: 1} とします。
観測キー(obj, "a");
// a を読み取り、get 関数をトリガーします console.log(obj.a);
// a を設定し、set 関数をトリガーします。obj.a = 1;

関数 observeObj(obj) {
  for (let key in obj) {
    // obj.hasOwnProperty を直接使用すると非標準のプロンプトが表示されます if (Object.prototype.hasOwnProperty.call(obj, key)) {
      obj を observeKey します。
    }
  }
  obj を返します。
}
関数 observeKey(obj, key) {
  値をobj[キー]とします。
  Object.defineProperty(obj, キー, {
    得る（） {
      console.log("プロパティを読み取り", 値);
      戻り値;
    },
    set(新しい値) {
      console.log("プロパティを設定する", newValue);
      値 = 新しい値;
    }
  });
}

obj = {a: 1, b: 2} とします。
obj を観察します。
コンソールにログ出力します。
// a を読み取り、get 関数をトリガーします console.log(obj.a);
// a を設定し、set 関数をトリガーします。obj.a = 1;

関数 observeObj(obj) {
  // パラメータ制限を追加します。オブジェクトのみがハイジャック可能で、これは再帰の終了条件でもあります。if (typeof obj !== "object" || obj == null) {
    戻る;
  }
  for (let key in obj) {
    // obj.hasOwnProperty を直接使用すると非標準のプロンプトが表示されます if (Object.prototype.hasOwnProperty.call(obj, key)) {
      obj を observeKey します。
      // ここで、属性の属性値がハイジャックされます。オブジェクトでない場合は、observeObj(obj[key]) に影響を与えずに直接返されます。
    }
  }
  obj を返します。
}
関数 observeKey(obj, key) {
  値をobj[キー]とします。
  Object.defineProperty(obj, キー, {
    得る（） {
      console.log("プロパティを読み取り", 値);
      戻り値;
    },
    set(新しい値) {
      console.log("プロパティを設定する", newValue);
      値 = 新しい値;
    }
  });
}

obj = { a: 1, b: 2, c: { name: "c" } } とします。
obj を観察します。
コンソールにログ出力します。
// a を読み取り、get 関数をトリガーします console.log(obj.a);
// a を設定し、set 関数をトリガーします。obj.a = 1;
// トリガー設定 function obj.c.name = "d";

obj = { a: 1, b: [1, 2] } とします。
obj を観察します。
// 新しい属性を追加します。obj.c = 3;
// get 関数はトリガーされません console.log(obj.c);
// 設定関数はトリガーされません obj.b.push(3);

// 最初に単一の属性をマウントします // options.data はソースと同等です options はターゲットと同等です
関数 proxyKey(ターゲット, ソース, キー) {
  Object.defineProperty(ターゲット、キー、{
    // ここでsource[key]は変数値と同等なので、最も単純な例はコアのget() {
      ソース[キー]を返します。
    },
    set(新しい値) {
      if (newValue === source[key]) {
        戻る;
      }
      ソース[キー] = 新しい値;
    }
  });
}
// 属性をトラバースしてマウントする function proxyObj(target, source) {
  for (let key in source) {
    // obj.hasOwnProperty を直接使用すると非標準のプロンプトが表示されます if (Object.prototype.hasOwnProperty.call(source, key)) {
      proxyKey(ターゲット、ソース、キー);
    }
  }
}
オプション = {
  データ: { 名前: 1 }
};
proxyObj(オプション、オプションデータ);
// 1
console.log(オプション名);

obj = {a: 1} とします。

log = [obj.a]; とします。

値を obj.a とします。
オブジェクト.defineProperty(obj, "a", {
  得る（） {
    戻り値;
  },
  set(新しい値) {
    (新しい値 === 値) の場合 {
      戻る;
    }
    値 = 新しい値;
    log.push(新しい値);
  }
});

2 番目の引数は 0 です。
3 を 0 に する
4 を 0 にします。
// [1,2,3,4]
コンソールにログを出力します。

クラスアーカイバ{
  コンストラクタ() {
    値を null にします。
    this.archive = [];
    Object.defineProperty(this, "a", {
      得る（） {
        戻り値;
      },
      set(新しい値) {
        (新しい値 === 値) の場合 {
          戻る;
        }
        値 = 新しい値;
        this.archive.push(新しい値);
      }
    });
  }
}
アーカイバを新しいアーカイバ（）にします。
アーカイバ.a = 1;
アーカイバ.a = 2;
// [1,2]
console.log(アーカイバ.アーカイブ);