如何将函数绑定到 Javascript 中对象数据成员的更改？答案

【问题标题】：How do I bind a function to a change in an object's data member in Javascript?如何将函数绑定到 Javascript 中对象数据成员的更改？
【发布时间】：2012-07-25 13:25:48
【问题描述】：

我正在使用 JavaScript 开发一个项目，我们正在为我们在办公室使用的组织站点构建一个 Greasemonkey 插件。我们无法让我们的更改保持渲染，因为我们不能简单地将更改注入现有的渲染函数。

因此，我们需要找到渲染发生的每个事件，并在那里注入我们自己的渲染函数。但是，有些事件我们可以看到正在发生，但我们无法参与其中。我想知道的是如何将函数绑定到对象的数据成员，以便在该成员更改时调用该函数。我们的一位团队成员似乎认为这是可能的，但他告诉我们使用的方法似乎不起作用。

我们尝试的是类似

window.Controller.bind("change:idBoardCurrent", OMGITWORKED);

其中idBoardCurrent 是window.Controller 的成员，OMGITWORKED 是我们希望在window.Controller.idBoardCurrent 更改时调用的函数。

我对 JavaScript 或数据绑定不是很熟悉，所以我不知道这是对还是错，也不知道它的正确与否。如果有人能指出在这个 sn-p 中要改变什么，或者如果他们能提出另一种解决方法，我将非常感激。

【问题讨论】：

标签： javascript data-binding

【解决方案1】：

您可以使用 Object.defineProperty 为 Objects 属性定义 setter 和 getter

Object.defineProperty(window.Controller,"idBoardCurrent",{
      get : function() { return this.val; },
      set : function(value) {this.val = value;OMGITWORKED(value); }
});
function OMGITWORKED(param) {
  console.log("idBoardCurrent has been Changed to " + param);
}

window.Controller.idBoardCurrent = "Test";
window.Controller.idBoardCurrent = "Test2";
console.log(window.Controller.idBoardCurrent)

编辑：根据上下文对象更改代码

JSBin

【讨论】：

您的答案看起来很有希望，但这里的对象 (window.Controller) 没有 defineProperty 方法。它只有一个 bind 方法，这就是我们最初使用它的原因。
window.Controller 对象从何而来？你不能做Object.defineProperty(window.Controller,"idBoardCurrent",....)`，因为它是一个对象，“主要”对象方法（defineProperty）应该能够在它上面定义一个属性。（不是window.Controller有方法，是javascripts Object对象）
非常感谢。以我有限的 Javascript 经验，我并没有完全理解你最初的意思，但我实现了你所做的更改并且它运行良好！

【解决方案2】：

由于这是专门针对 Firefox，您可以使用它提供的 mutation events。但请注意该页面上的警告：

他们的 W3C 规范从未被广泛实施，现在已弃用
使用 DOM 突变事件“显着降低”DOM 修改的性能

如果您能够将自己限制为 Firefox 14 及更高版本，则可以改用新的 mutation observers stuff。

【讨论】：

【解决方案3】：

这是，当我没有完全错的时候，更多的是 javascript 的问题。我找到了有关该主题的一些信息

Listening for variable changes in JavaScript or jQuery

jQuery trigger on variable change

Javascript Track Variable Change

抱歉，没看懂题目。

一切顺利

【讨论】：