如何偵測 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中文網其他相關文章！