JavaScript对象变量的更改事件监听器

Question

我有一个对象变量，它有几个属性。

MyVar = {"prop1" : 0, "prop2": 0....};

我该如何编写一个事件监听器，以便监听任意属性的更改？

谢谢您的建议。

- frenchie

---

你看过这些吗？

• https://dev59.com/1XNA5IYBdhLWcg3wKam3
• https://dev59.com/S3VC5IYBdhLWcg3wnCaA
• https://dev59.com/7lHTa4cB1Zd3GeqPUMHt
• https://dev59.com/uXI-5IYBdhLWcg3wn526

- no.good.at.coding

Answer 1

使用ES5，您可以使用setter:

var MyVar = {
  _prop1: 0,
  get prop1() { return this._prop1; },
  set prop1(value) { this._prop1 = value; /*Listener code can go here*/ }
};

- davin

---

现在还有一个代理对象，它有点像getter和setter，因为消费者可以使用普通赋值(=)和属性访问object.property或object[propertyKey]。 - iono

Answer 2

如果您想在对象变量更改时触发事件，可以为该对象设置一个小的观察者模式。

var MyVar = {
    prop1: "Foo",
    prop2: "Bar",
    events: {},

    setProp1: function(prop1) {
        this.prop1 = prop1;
        this.notify('prop1', this.prop1);
    },

    setProp2: function(prop2) {
        this.prop2 = prop2;
        this.notify('prop2', this.prop1);
    },

    addEvent: function(name) {
        if (typeof this.events[name] === "undefined") {
            this.events[name] = [];
        }
    },

    register: function(event, subscriber) {
        if (typeof subscriber === "object" && typeof subscriber.notify === 'function') {
            this.addEvent(event);
            this.events[event].push(subscriber);
        }
    },

    notify: function(event, data) {
        var events = this.events[event];
        for (var e in events) {
            events[e].notify(data);
        }
    }
};

var Prop1 = {
    notify: function() {
        alert('prop1 changed');
    }
};

var Prop2 = {
    notify: function() {
        alert('prop2 changed');
    }
};

$(document).ready(function(){
    MyVar.register('prop1',Prop1);
    MyVar.register('prop2',Prop2);

    MyVar.setProp1('New Var');
    MyVar.setProp2('New Var');
});

使用setter方法而不是直接设置对象属性，然后触发通知事件以通知正在观察它的其他对象。

JS FIDDLE

- Richard Christensen

Answer 3

我知道这是一个老问题，但是如果您正在进行调试，则可以使用您浏览器中的调试工具添加监听器来调试脚本。

个人建议在Firefox中使用Firebug，一旦打开，请转到DOM选项卡，搜索您的变量，然后（类似于将断点添加到脚本）添加断点。它将会中断并滚动到将要处理变量更改的特定代码行。

请查看这个链接-> Firefox FIREBUG 或 Google Chrome DEVELOPER TOOL

- Mohammed Joraid