跟踪对象是否改变答案

【问题标题】：Track whether object changed跟踪对象是否改变
【发布时间】：2011-08-22 14:12:52
【问题描述】：

// A simple Javascript Object / String
var object = "hello";

// Imagine a button in the DOM, and if it's clicked the object value will change
document.getElementById("button").onclick = function(){
   window.object = "hello world";
}

// Now I would like to track and do something when the object is changed, ex:
object.onreadystatechange = function(){
   alert(object);
}

注意：这听起来很愚蠢，因为我可以在按钮上的 onclick 事件中获得更改，但这不是我想要的，我想严格跟踪对象本身的更改种使用，上面的代码只是一个例子。

【问题讨论】：

标签： javascript object

【解决方案1】：

Javascript 不允许您在任意对象/变量上设置编程观察点/事件。

您可以使用封装向外界隐藏对象内部的各个值，只允许通过具有您想要的副作用的专用“setter”函数来修改它们。

【讨论】：

【解决方案2】：

你可以用 get 和 set 方法把它变成一个实际的对象：

// A simple Javascript Object 
var object = new (function(){
    this.text = 'hello';

    this.setText = function(msg){
         this.text = msg
         //on change event
    }
})();

// Imagine a button in the DOM, and if it's clicked the object value will change
document.getElementById("button").onclick = function(){
   object.setText('New Text');
}

这是一个演示小提琴：http://jsfiddle.net/maniator/BSYpz/

【讨论】：

【解决方案3】：

您可以使用此处所述的 Getter 和 Setter 来跟踪 JavaScript 对象，

http://ejohn.org/blog/javascript-getters-and-setters/

你也可以看看，

Javascript getters and setters for dummies?

【讨论】：

【解决方案4】：

无论您想使用什么框架，在属性更改时自动触发事件都没有魔法。在您的情况下，您应该做的可能是围绕这些数据创建一个对象，并且只为其公开 get 和 set 方法：

var something = function()
{
    var value = 10;

    this.getValue = function()
    {
        return value;
    }

    this.setValue = function(newValue)
    {
         ValueChanging(value, newValue);
         value = newValue;
    }

    var ValueChanging = function(old, new)
    {
         // Do Something
    }
}

【讨论】：

【解决方案5】：

最近的 Google Chrome 版本（例如带有“启用实验性 JavaScript”标志的测试版）支持 Object.observe() API。更多信息请访问RESPOND TO CHANGE WITH OBJECT.OBSERVE 和 working example

【讨论】：