如何有效追蹤 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」），setter 函數將被觸發並將變更記錄到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中文網其他相關文章！