Javascript Object.watch（）是否适用于所有浏览器？

请注意，和现在都不推荐使用（截至2018年6月）。

---

我正在寻找一种简单的方法来监控对象或变量的变化，我找到了Mozilla浏览器支持的

object.watch（）

，但IE不支持它。因此我开始四处搜索，看看是否有人写过类似的东西

我发现的唯一一件事是，但我不确定这是不是最好的办法。我当然在我的大多数项目中使用jQuery，所以我不担心jQuery方面

不管怎样，问题是：有人能给我看一个jQuery插件的工作示例吗？我很难让它工作

或者，是否有人知道跨浏览器工作的更好的替代方案

回答后更新：

谢谢大家的回复！我试用了这里发布的代码：

但我似乎无法让它与IE一起工作。下面的代码在Firefox中运行良好，但在IE中没有任何作用。在Firefox中，每次更改

watcher.status

，都会调用

watcher.watch（）中的
document.write（）
，您可以在页面上看到输出。在IE中，这不会发生，但我可以看到，
watcher.status
正在更新值，因为最后一个
document.write（）
调用显示了正确的值（在IE和FF中）。但是，如果不调用回调函数，那么这是毫无意义的…：）

我错过什么了吗

var options = {'status': 'no status'},
watcher = createWatcher(options);

watcher.watch("status", function(prop, oldValue, newValue) {
  document.write("old: " + oldValue + ", new: " + newValue + "<br>");
  return newValue;
});

watcher.status = 'asdf';
watcher.status = '1234';

document.write(watcher.status + "<br>");

var options={'status'：'no status'}，
watcher=createWatcher（选项）；
watcher.watch（“状态”），函数（道具、旧值、新值）{
文件。写入（“旧：+oldValue+”，新：+newValue+”
”；
返回新值；
});
watcher.status='asdf'；
watcher.status='1234'；
document.write（watcher.status+“
”）；
该插件只需使用计时器/间隔来重复检查对象上的更改。也许已经足够好了，但就我个人而言，作为一个观察者，我希望更直接

下面是将
监视
/
取消跟踪
带到IE的尝试：

它确实改变了Firefox添加观察者的语法。而不是：

var obj = {foo:'bar'};
obj.watch('foo', fooChanged);

你可以：

var obj = {foo:'bar'};
var watcher = createWatcher(obj);
watcher.watch('foo', fooChanged);

不是那么甜蜜，但作为一个观察者，你会立即得到通知。
（很抱歉交叉发布，但我对类似问题的回答在这里很有效）

我已经为此创建了一个小的。它适用于IE8、Safari、Chrome、Firefox、Opera等。当前答案

使用新对象，它可以查看对其目标的更改

let validator = {
    set: function(obj, prop, value) {
        if (prop === 'age') {
            if (!Number.isInteger(value)) {
                throw new TypeError('The age is not an integer');
            }
            if (value > 200) {
                throw new RangeError('The age seems invalid');
            }
        }

        // The default behavior to store the value
        obj[prop] = value;

        // Indicate success
        return true;
    }
};

let person = new Proxy({}, validator);

person.age = 100;
console.log(person.age); // 100
person.age = 'young'; // Throws an exception
person.age = 300; // Throws an exception

2015年的旧答案

你本来可以用的。但是对不起大家
 我还认为现在最好的解决方案是使用Watch.JS，在这里可以找到一个不错的教程：
注意，在Chrome 36和更高版本中，您也可以使用它。这实际上是未来ECMAScript标准的一部分，而不是像Mozilla的
Object.watch
那样的特定于浏览器的功能

Object.observe
仅适用于对象属性，但比
Object.watch
（用于调试目的，而非生产使用）性能要好得多

你可以用

在
foo

Object.defineProperty(foo, "bar", {
  get: function (val){
      //some code to watch the getter function
  },

  set: function (val) {
      //some code to watch the setter function
  }
})

这个问题的答案有点过时了。和都已弃用，不应使用

现在，您可以使用该对象监视（和拦截）对对象所做的更改。以下是一个基本示例：

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

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

如果需要观察对嵌套对象所做的更改，则需要使用专门的库。我发布了，它的工作原理如下：

var test = {testing:{}};
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}}]

我在我的一个项目中使用过。而且运行良好。使用此库的主要优点之一是：

“使用Watch.JS，您不必改变开发方式。”

下面给出了一个例子


//以我们喜欢的方式定义我们的对象
变量ex1={
attr1:“attr1的初始值”，
属性2：“属性2的初始值”
};
//为属性定义“观察者”
手表（ex1，“attr1”，function（）{
警报（“attr1已更改！”）；
});
//更改属性时，将调用其观察程序
ex1.attr1=“其他值”
IIRC您可以在IEReplace document.write（）和alert（）中使用onPropertyChange。应该很好。是的，看那些时间戳。。。不需要向下投票，crescentfresh也在帖子中添加了更多信息，即使是相同的链接。同时，我尝试了在该页面上找到的代码，但仍然发现了一个问题。但我可能忽略了一些事情。我用更多的信息更新了我的原始帖子…关于如何使用它以及它如何在内部工作的解释对于我们这些不是JS大师的人来说会很好，谢谢。提示：使用Firefox（后面的语句不是用Chrome打印的）我知道idea
Object.defineProperty（）
已经存在。我最后看了一下参考资料，看看它是如何工作的。嗯，我无法让这个polyfill在ios safari上工作。I get Error:undefined不是一个函数（评估'Object.observe（a.imgTouch，函数（a）{console.debug（“lastX:+a）}）'））@infomofo Hi，您想在项目页面上打开一个问题，并提供所有详细信息吗？我还没有在iOS上测试过，但我会调查这个问题。这太棒了！但我会修改它：）以不覆盖原始setter。我会在2018年参考foo.\u someObject=foo.someObjectsimple和elegentAs这是不推荐的，不再受所有主流浏览器的支持
var test = {testing:{}};
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}}]