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，然后将值设置为undefined！添加监视事件后，我正在更改list.active.val的值。

这是我用于手表功能的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

添加了proxy-observe Polyfill但是这似乎没有看到，我已经添加了它：

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

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

没有任何错误，它只是无所事事，想法？

Answer 1

您无需实施自定义watch/unwatch功能， Ecmascript 2015已经提供了特定的API：

`Proxy`

有很多polyfill可以在旧版浏览器上运行。

有一个名为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';

JavaScript Watch从对象中删除监视的值

1 个答案:

`Proxy`