JavaScript で変数の変更を検出するにはどうすればよいですか?

JavaScript での変数の変更のリッスン

JavaScript では、変数の値が変更されたときに通知を受けることが望ましいことがよくあります。これは、2018 年に導入された Proxy オブジェクトを使用して実現できます。Proxy オブジェクトを使用すると、プロパティの変更をインターセプトし、それに応じて応答するプロキシを作成できます。

Proxy オブジェクトを使用するには、まずターゲット オブジェクトを作成します。観測された:

var targetObj = {};

次に、Proxy オブジェクトを使用してプロキシを作成し、プロパティが次の場合に実行されるコールバックを指定します。 set:

var targetProxy = new Proxy(targetObj, {
  set: function (target, key, value) {
      console.log(`${key} set to ${value}`);
      target[key] = value;
      return true;
  }
});

プロキシ経由で対象オブジェクトのプロパティを設定すると、コールバック関数が実行されます。例:

targetProxy.hello_world = "test"; // console: 'hello_world set to test'

Proxy オブジェクトには、古いブラウザでは使用できず、特定のオブジェクトでは期待どおりに動作しない可能性があるという欠点があります。ネストされたオブジェクトの変更を監視するには、Observable Slim などの特殊なライブラリを使用できます。

Observable Slim

Observable Slim は、ネストされたオブジェクトの変更を監視するために設計されたライブラリです。これを使用するには、まず監視対象のオブジェクトを作成します:

var test = {testing:{}};

次に、Observable Slim を使用して create 関数でプロキシを作成し、変更が発生したときに実行されるコールバックを指定します:

var p = ObservableSlim.create(test, true, function(changes) {
    console.log(JSON.stringify(changes));
});

観測オブジェクトのプロパティが変化すると、コールバック関数が実行されます。例:

p.testing.blah = 42; // console:  [{"type":"add","target":{"blah":42},"property":"blah","newValue":42,"currentPath":"testing.blah",jsonPointer:"/testing/blah","proxy":{"blah":42}}]

以上がJavaScript で変数の変更を検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。