如何在JavaScript中观看复杂对象及其变化？

Question

我试图找到类似的功能AngularJS的$watch功能(如定义在这里),它允许"看复杂的对象",它们的变化.据我所知,我理解它能够观察对象内变量的变化,即使它们本身也在一个对象内(在被观察的对象内).

我希望在原生JavaScript(或JQuery)中具有相同的"可观察性",但我似乎找不到任何东西.我知道Object.watch()和在这里Polyfill找到的但是我很确定这只是参考检查或只监视对象内的'立即'变量而不是嵌套的任何东西可以这么说并且不检查对象内的"深"属性.

有谁知道任何图书馆,功能,任何可以帮助我提供这种"深度观察"能力的东西？或者甚至帮助我Object.watch()更好地理解它是否实际上提供了我想要的东西？

我正在创建一个实时音乐应用程序,并希望在仪器上有一个"深度"监视,以便我可以看到它的任何变量,参数等是否发生变化,以便我可以将它同步到服务器和其他客户端.

任何帮助将不胜感激,谢谢!

Answer 1

由于@ Booster2ooo提到您可以使用Proxy对象来观察更改,您可以使用以下内容:

function proxify(object, change) {
    // we use unique field to determine if object is proxy
    // we can't test this otherwise because typeof and
    // instanceof is used on original object
    if (object && object.__proxy__) {
         return object;
    }
    var proxy = new Proxy(object, {
        get: function(object, name) {
            if (name == '__proxy__') {
                return true;
            }
            return object[name];
        },
        set: function(object, name, value) {
            var old = object[name];
            if (value && typeof value == 'object') {
                // new object need to be proxified as well
                value = proxify(value, change);
            }
            object[name] = value;
            change(object, name, old, value);
        }
    });
    for (var prop in object) {
        if (object.hasOwnProperty(prop) && object[prop] &&
            typeof object[prop] == 'object') {
            // proxify all child objects
            object[prop] = proxify(object[prop], change);
        }
    }
    return proxy;
}

你可以像这样使用这个功能:

object = proxify(object, function(object, property, oldValue, newValue) {
    console.log('property ' + property + ' changed from ' + oldValue +
                ' to ' + newValue);
});

...