Object.observe-并非所有主流浏览器都支持，我可以用什么替代？

pomegranate 发表于 Dev

石榴

我拥有在Chrome浏览器中可以使用的功能，当名为finishLoading的变量更改值时，该功能会打印到控制台。

Object.observe(finishedLoading, function(id, oldval, newval) {
         console.log('finished loading' + id + ' went from ' + oldval + ' to ' + newval);
     }

这在许多其他现代浏览器（例如Firefox，Safari）中不起作用。有没有我可以使用的替代方法会得到更好的支持？谢谢！

布劳哈利

一种更广泛支持的方法是Object.defineProperty。例如，defineProperty可用于控制对象的某些属性：

var o = { prop: '' };
Object.defineProperty(o, 'prop', {
  get: function() { return this.value; },
  set: function(newValue) {
    // a certain property is being changed
    alert('is changed');
    this.value = newValue; 
  }
});

o.prop = 'Johnson';

上面的示例显示了如何使用defineProperty以及更改对象o的prop时将调用已定义的setter（set）。

在此参考资料的底部，您可以看到IE-8也支持它，但仅在某些条件下（IE8仅支持在DOM节点上使用的Object.defineProperty）。

但是使用它时要小心，因为这也会因为缺少此而将属性分配给窗口对象：

var o = { b:''};
Object.defineProperty(o, 'b', {
  get: function() { return value; },
  set: function(newValue) { value = newValue; },
});

o.b = 'abc';
console.log(window.value); // 'abc'

跟踪财产的旧值的方法

这更符合您的要求：

var o = { prop: '' };

Object.defineProperty(o, 'prop', {
  get: function() { return this.propValue; },
  set: function(newValue) {
    // an certain property is being changed
    console.log('old-value: ',this['oldprop']);
    console.log('new-value: ',newValue);
    this.propValue = newValue; 
    this['oldprop'] = this.propValue;
  }
});

o['prop'] = 'joseph';
console.log(o);
o['prop'] = 'jack';
console.log(o);
o['prop'] = 'john';
console.log(o);

通过使用Object.defineProperty观察整个对象

除此之外，您还可以创建一个函数来跟踪整个对象以及是否更改了任何属性：

function observeObject(obj){

  var keys = Object.keys(obj);

  for(var k=0; k < keys.length; k++){

    var key = keys[k];

    (function(key){

      var keyName = key+'value';
      var oldKeyName = 'old'+key+'value';

      obj[oldKeyName] = obj[key];

      Object.defineProperty(obj, key, {
        get: function() { return this[keyName]; },
        set: function(newValue) {

          console.log('old-value: ',this[oldKeyName]);
          console.log('new-value: ',newValue);

          this[keyName] = newValue; 
          this[oldKeyName] = this[keyName];

        }
      });



    })(key);

  }

}


var person = { name : 'jack', age: 26 };

observeObject(person);

person.name = 'john';
person['age'] = 27;