跟踪对象是否改变

Question

// 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事件的变化，但是这不是我想要的，我要严格跟踪对象的变化本身用于任何类型的用途，上面的代码仅仅是一个例子。

Answer 1

那么你可以把它的实际oject用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/

Answer 2

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

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

Answer 3

您可以通过如下描述getter和setter跟踪JavaScript对象，

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

你也可以看看，

Javascript getters and setters for dummies?

Answer 4

无论您想使用哪种框架，自动触发属性更改事件都没有什么神奇之处。在你的情况，你应该做的可能是使一个物体环绕这个数据，只有公开获取并为其设置方法：

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 
    } 
} 

Answer 5

最近的谷歌浏览器的版本（如测试版与“启用实验性JavaScript”标志。）支持Object.observe（）API。更多信息在RESPOND TO CHANGE WITH OBJECT.OBSERVE和working example