为什么Object.observe()会被弃用

Question

有没有其他方法？

有没有其他方法可以在对象中进行更改检测？

有Proxy方法，但有人能告诉我如何使用Proxy实现此功能：

var obj = {
  foo: 0,
  bar: 1
};

Object.observe(obj, function(changes) {
  console.log(changes);
});

obj.baz = 2;
// [{name: 'baz', object: <obj>, type: 'add'}]

obj.foo = 'hello';
// [{name: 'foo', object: <obj>, type: 'update', oldValue: 0}]

Answer 1

可以使用getter和setter来实现这一点。

var obj = {
  get foo() {
    console.log({ name: 'foo', object: obj, type: 'get' });
    return obj._foo;
  },
  set bar(val) {
    console.log({ name: 'bar', object: obj, type: 'set', oldValue: obj._bar });
    return obj._bar = val;
  }
};

obj.bar = 2;
// {name: 'bar', object: <obj>, type: 'set', oldValue: undefined}

obj.foo;
// {name: 'foo', object: <obj>, type: 'get'}

或者，在支持代理的浏览器中，您可以编写更通用的解决方案。

var obj = {
  foo: 1,
  bar: 2
};

var proxied = new Proxy(obj, {
  get: function(target, prop) {
    console.log({ type: 'get', target, prop });
    return Reflect.get(target, prop);
  },
  set: function(target, prop, value) {
    console.log({ type: 'set', target, prop, value });
    return Reflect.set(target, prop, value);
  }
});

proxied.bar = 2;
// {type: 'set', target: <obj>, prop: 'bar', value: 2}

proxied.foo;
// {type: 'get', target: <obj>, prop: 'bar'}

Answer 2

免责声明:我是下面推荐的object-observer库的作者。

我不会使用getters/setters解决方案--它很复杂，不可伸缩，也不可维护。Backbone以这种方式进行双向绑定，而使其正确工作的样板程序是相当一段代码。

代理是实现所需的最好方法，只需在上面的示例中添加一些注册和管理回调，并在发生更改时执行它们。

至于polyfill库:其中一些/大部分是利用“脏检查”或轮询技术实现的-效率不高，性能不佳。有时，这就是上面Nirus指出的polyfill的情况。

我建议选择一些通过代理进行观察的库。有几个，object-observer就是其中之一:正是为这个用例编写的，利用本机代理，提供深度树观察等。

Answer 3

解决方案应该始终是的首选。

只是为了以防万一，如果你想支持更老的浏览器，我建议你使用Github上提供的任何polyfill库，或者使用IE9中支持的 API来模拟相同的库。

var obj = Object.defineProperties({}, {
    "foo":{
        get:function(){
            console.log("Get:"+this.value);
        },
        set:function(val){
            console.log("Set:"+val);
            this.value = val;
        }
    },

    "bar":{         
        get:function(){
            console.log("Get:"+this.value);
        },
        set:function(val){
            console.log("Set:"+val);
            this.value = val;
        }
    }
 });

注意：这不是一个可扩展的解决方案。做出明智的决定，是否将上述API用于更大的数据对象和计算密集型需求。