JavaScript Watch 从对象中删除监视值

Question

我正在尝试观察一个对象的值，如果它发生变化，那么一些东西..

这就是我的目标，

var list = [{
   object: undefined,
   index: 0,
   src: 'url here',
   active: { val: 0 }
}]

因此，当我从上面创建一个新对象时，我使一个附加对象处于事件状态，但将 active 值设置为上面的值，这在两个对象之间保留了该对象的引用。

var newList = [];
newList.push({
  object: undefined,
  index: 0,
  src: list[i].src,
  active: list[i].active // Use reference to old list
});

所以我试图观察 active 值，如下所示:

(list.active).watch('val', function() {
  if (list.active.val === 1) {
    console.log('active');
    list.object.classList.add('active');
  } else {
    console.log('not active');
    list.object.classList.remove('active');
  }
});

但是，当我看到这个值时，它似乎被删除了，就好像我 console.log 出了 list 一样，然后该值被设置为未定义!添加监视事件后，我正在更改 list.active.val 的值。

这是我用于 watch 功能的 Polyfill。

// object.watch
if (!Object.prototype.watch) {
  Object.defineProperty(Object.prototype, "watch", {
    enumerable: false,
    configurable: true,
    writable: false,
    value: function (prop, handler) {
      var oldval = this[prop],
          newval = oldval,
          getter = function () {
            return newval;
          },
          setter = function (val) {
           oldval = newval;
            return newval = handler.call(this, prop, oldval, val);
          };

      if (delete this[prop]) { // can't watch constants
        Object.defineProperty(this, prop, {
          get: getter,
          set: setter,
          enumerable: true,
          configurable: true
        });
      }
    }
  });
}

// object.unwatch
if (!Object.prototype.unwatch) {
  Object.defineProperty(Object.prototype, "unwatch", {
    enumerable: false,
    configurable: true,
    writable: false,
    value: function (prop) {
      var val = this[prop];
      delete this[prop]; // remove accessors
      this[prop] = val;
    }
  });
}

编辑 1

添加了代理观察Polyfill，但是这似乎并没有仍在观看，我已经像这样添加了它:

list[0] = Object.observe(list[0], function(changeset) {
  console.log('changed');
});

list[0].active 包含对象 { val: 0 }，因此它应该观察该对象。

没有收到任何错误，只是什么也没做，有想法吗？

Answer 1

您不需要实现自定义监视/取消监视功能，Ecmascript 2015 已经提供了特定的 api:

Proxy

有大量的填充代码可以使其在旧版浏览器上运行。

有一个名为 Object.Observe 的提案可以满足您的需求，您可以在此处找到 Proxy 移植:https://github.com/anywhichway/proxy-observe

遵循基本工作示例:

// Your Observable target
const target = Object.create(null);

const observer = {
  set(target, key, value) {
    console.log(`Should we set '${value}' as value of '${key}' property?`)
    
    target[key] = value;
  },
};


const observable = new Proxy(target, observer);
observable.someKindOfProperty = 'Hello World';