监听 Javascript 对象值的变化答案

【问题标题】：Listen for change to Javascript object value监听 Javascript 对象值的变化
【发布时间】：2011-10-05 02:50:56
【问题描述】：

是否可以（使用 jQuery 或其他方式）监听非 DOM Javascript 对象（或变量）值的变化？所以，例如，我有：

function MyObject()
{
    this.myVar = 0;
}

var myObject = new MyObject();
myObject.myVar = 100;

有没有办法监听myVar 的值何时发生变化并调用函数？我知道我可以使用 getter/setter，但以前版本的 IE 不支持它们。

【问题讨论】：

JavaScript - Watch for object properties changes 的可能重复项
有一个提议 Object.observe() developers.google.com/web/updates/2012/11/…

标签： javascript jquery

【解决方案1】：

如果IE很重要，我猜你对Watch不感兴趣

但似乎有人写了一个 shim 使这个问题重复

Watch for object properties changes in JavaScript

【讨论】：

这可能是最好的解决方案——它仍然不包括 IE7，但在一个有 IE 的世界里，没有什么是完美的...... :)
不加评论就投反对票对任何人都没有帮助

【解决方案2】：

你基本上可以实现这样的行为

function MyObject(onMyVarChangedCallback)
{
    this.myVar = 0;

    this.setMyVar = function (val) {
       this.MyVar = val;

       if (onMyVarChangedCallback) {
           onMyVarChangedCallback();
       }
    }
}

function onChangeListener() {
   alert('changed');
}

var o = new MyObject(onChangeListener);

【讨论】：

这不能像设置器一样设置值，对吧？ o.myVar = 100 不起作用，它必须是 o.setMyVar(100) 这就是我试图避免的 - 我想让它像一个 setter 一样工作，尽管在保持支持时看起来这可能是不可能的所有浏览器。

【解决方案3】：

基本上你有两个选择

使用非标准的 watch 方法，该方法仅在 Firefox 中可用
使用旧 IE 版本不支持的 getter 和 setter

第三个跨平台选项是使用不太好的轮询

watch 示例

var myObject = new MyObject();

// Works only in Firefox
// Define *watch* for the property
myObject.watch("myVar", function(id, oldval, newval){
    alert("New value: "+newval);
});

myObject.myVar = 100; // should call the alert from *watch*

getters 和 setters 的示例

function MyObject(){
    // use cache variable for the actual value
    this._myVar = undefined;
}

// define setter and getter methods for the property name
Object.defineProperty(MyObject.prototype, "myVar",{
    set: function(val){
        // save the value to the cache variable
        this._myVar = val;
        // run_listener_function_here()
        alert("New value: " + val);
    },
    get: function(){
        // return value from the cache variable
        return this._myVar;
    }
});

var m = new MyObject();
m.myVar = 123; // should call the alert from *setter*

【讨论】：

当您说“旧版本的 IE”时，这是否包括 IE8？我知道它是旧的，但它支持 getter 和 setter 吗？
这个答案来自 2011 年。当时 IE8 还没有那么老。