数组更改侦听器 [重复]

Question

可能重复：
Javascript - How to extend Array.prototype.push()?

如何通知（运行预定义函数）注册数组的任何更改（或至少添加或删除元素）？ 我尝试使用原型。我不想因为没有提供我自己的一些代码示例而被责骂。所以这就是我希望喜欢使用它的方式。

var myArray = [];
myArray.bind(function() {
    console.log('wtf'); // Wed Thu Fri and what were you thinking?
});

我不需要矫枉过正。我基本上知道我将使用的 Array 函数作用域（push、pop、splice 和其他几个）。这是一种使用主干 MVC 的方法。我想在数组上运行逻辑，然后相应地突出显示视图。但是该视图已经附加到一个集合中。对该集合的任何更改都会重新呈现视图中的实际 DOM。我不想要那个。我只是想为 CSS 目的在视图中的相应 DOM 中添加或删除一个类。

Answer 1

这样的事情会设置数组 push() 的全局监控。

(function() {
  var _push = Array.prototype.push;
  Array.prototype.push = function() {
    console.log("push");
    return _push.apply(this, arguments);
  }
})();

否则，正如尼尔建议的那样，您可以创建另一个类。

var MonitoredArray = function() {
  var rv = [];
  var _push = rv.push;
  rv.push = function() {
    console.log("push()");
    console.log(arguments);
    return _push.apply(this, arguments);
  }
  return rv;
}

设置基本一次监控 N 个函数调用。

var MonitoredArray = function() {
  var rv = [];

  // the names of the functions we want to log:
  var logged_fns = ["push", "pop"];

  for (var i in logged_fns) { (function() {
    var name = logged_fns[i]
    var fn = rv[name];

    rv[name] = function() {
      console.log(name + "()");
      console.log(arguments);
      return fn.apply(rv, arguments);
    }
  })()}

  return rv;
}

类似的改编也应该适用于第一个示例。

Answer 2

您正在寻找Object.observe，但它尚未广泛使用。在 Chrome Canary 中，启用 about:flags 上的“Experimental JavaScript”后，您可以尝试以下操作：

​var arr = [];

​Object.observe(arr, function(changes) {
    console.log("The array changed. Changes:", changes);
});

Answer 3

我所做的是创建了自己的“数组”类型，它只是扩展了原型数组，然后我添加了自己的处理程序。

例如：

var MyArray = function() {
    var arr = [];
    arr.push = function() {
        console.log("PUSHING", arguments);
        return Array.prototype.push.apply(this, arguments);
    }

    return arr;
};

用法：

var arr = new MyArray;
arr.push(12, 3, 45);
...

小提琴：http://jsfiddle.net/maniator/vF659/