JavaScript で変数の変更を効果的に追跡するにはどうすればよいですか?

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

JavaScript では、デバッグまたはその他の目的で変数への変更を追跡する必要があるのが一般的です。 。 Object.watch や Object.observe などの古いメソッドは時代遅れですが、より堅牢で効果的な機能を提供する新しいソリューションが登場しています。

プロキシ: 最新のアプローチ

紹介ES6 では、Proxy オブジェクトを使用して、既存のオブジェクトをラップし、そのプロパティに加えられた変更をインターセプトできます。これにより、変数の変更を監視するのに最適になります。

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

プロキシ オブジェクトにプロパティを設定すると (例: targetProxy.hello_world = "test")、セッター関数がトリガーされ、変更をconsole.

観察コンプレックスオブジェクト

プロキシは、ネストされたオブジェクトに常に適しているとは限りません。このような場合には、Observable Slim のようなライブラリが特殊なソリューションを提供します。 Observable Slim は、オブジェクトの周囲にリアクティブ ラッパーを作成し、変更を追跡し、変更が発生したときにイベントを起動します。

const test = { testing: {} };
const p = ObservableSlim.create(test, true, (changes) => {
  console.log(JSON.stringify(changes));
});

p.testing.blah = 42; // Logs properties and changes in JSON format

考慮事項

• プロキシは完全にはサポートされていません。古いブラウザでは、
• 日付などの特殊なオブジェクトが期待どおりに動作しない可能性があります。プロキシ。
• 複雑なオブジェクトの場合は、Observable Slim のような特殊なライブラリをお勧めします。

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