Javascript 为什么Object.observe（）已被弃用

有没有其他办法

是否有其他方法在对象中进行更改检测

有代理方法，但谁能告诉我如何使用代理实现这一点：

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}]

var obj={
傅:0,，
酒吧：1
};
观察对象（obj，功能（变化）{
控制台日志（更改）；
});
obj.baz=2；
//[{name:'baz'，object:，type:'add'}]
obj.foo='hello'；
//[{name:'foo'，object:，type:'update'，oldValue:0}]

您可以通过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={
getfoo（）{
log（{name:'foo'，object:obj，type:'get'}）；
返回对象。\u foo；
},
设置栏（val）{
log（{name:'bar'，object:obj，type:'set'，oldValue:obj.\u bar}）；
返回对象。_bar=val；
}
};
obj.bar=2；
//{name:'bar'，object:，type:'set'，oldValue:undefined}
obj.foo；
//{name:'foo'，object:，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'}

var obj={
傅:1,，
酒吧：2间
};
var proxied=新代理（obj{
获取：函数（目标、道具）{
log（{type:'get'，target，prop}）；
返回Reflect.get（目标、道具）；
},
设置：功能（目标、道具、值）{
log（{type:'set'，target，prop，value}）；
返回Reflect.set（目标、道具、值）；
}
});
proxied.bar=2；
//{类型：'set'，目标：，属性：'bar'，值：2}
proxied.foo；
//{type:'get'，target:，prop:'bar'}

解决方案应始终是首选

出于某种原因，如果您想支持较旧的浏览器，我建议您选择Github上提供的任何polyfill库，或者使用IE 9中支持的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适用于更大的数据对象和计算密集型需求

---

免责声明：我是下面建议的库的作者

我不会选择getters/setters解决方案——它很复杂，不可扩展，也不可维护。主干以这种方式进行双向绑定，使其正常工作的样板文件是一段相当复杂的代码

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

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

---

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

Proxy（）

现在就在那里！或使用或代理和getter/setter与

对象相比非常有限。我希望它没有被删除。Object.observe没有打破严格的相等。在这种情况下使用反射API（相对于简单的对象访问）有什么好处吗？@Emissary使用对象访问将再次触发代理陷阱，导致无限循环。谢谢，但我不能用
target[prop]复制无限循环=值
-您在什么环境中运行？代理是否也应该替换原始变量以“观察”其他
obj.bar=x
不执行此处建议的操作。可能与代理支持不完整有关。对此进行更深入的讨论。@DanPrince
Reflect.get
会触发get陷阱。浏览器支持怎么样，因此，IMO在生产环境中使用代理还不是一个好主意！对，此实现不会在不支持代理对象的任何环境上运行。然而，所有可下载的主流浏览器（Chrome、Firefox、Opera）都已经存在，而且实际上还有Edge。手机版本也在那里。因此，我所能看到的唯一担忧是IE pre Edge——就我个人而言，我已经把它抛在了身后。在企业界，放弃对IE的支持通常不是一种选择。作为企业员工，我自己——你正在闯入一扇敞开的大门！嗯，这个项目是一种渴望表达我自己+我自己的网络应用程序的助手+表达对Angular/React和其他任何东西的极端厌恶。我现在用它写东西，把它与习惯元素紧密结合，享受新世界。不，不管是好是坏。