Object.observe（）が非推奨になった理由

Question

別の方法がありますか？

オブジェクトの変更検出を行う別の方法はありますか？

ありプロキシ方式があるが、誰がどのように私はプロキシを使用してこれを達成することができます私に言うことができる：

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: 'baz', 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

@Dan solution正しいです。

かなり古いブラウザをサポートしたい場合は、polyfillに行くことをお勧めします。

または使用免責

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; 
     } 
    } 
}); 

Answer 3

IE 9でサポートされてObject.defineProperties API：私はobject-observerライブラリの作者は、以下の提案です。

私はgetters/settersの解決策にはいきません。複雑で、スケーラブルではなく、保守不能です。バックボーンはそのように双方向バインディングを行い、正しく動作させるための定型文はかなりのコードでした。

プロキシは、必要なものを達成するための最良の方法です。上の例にいくつかのコールバック登録と管理を追加し、変更時にそれらを実行するだけです。

polyfillライブラリに関して：これらのうちのいくつかは、「ダーティチェック」またはポーリング技術を使用して実装されています。効率的ではなく、パフォーマンスがありません。場合によっては、上記のNirusによって指摘されたpolyfillのケースです。

私は、プロキシを介して観測を行うライブラリを選択することをお勧めします。そこにはいくつかありますが、object-observerのうちの1つがあります。このユースケースのために正確に書かれた、ネイティブのプロキシを利用し、ディープツリーの観察などを提供します。