オブジェクトの値の変更を検出し、変更された値のキーを取得するのに、どのようなイベントを使用できますか？

Question

私はこのようないくつかの（簡単な）key: valueペア含むオブジェクトがあります。

var things = { 
    "0": "apple", 
    "1": "mango", 
    "2": "pear" 
    // ect... 
}; 

はありますが、私は、オブジェクトの値の変化をリッスンするために使用することができますObject.prototypeで関数やメソッドに建てられましたか？

たぶん、このような何か：私はjQueryとブラウザのサポートを使用して気にしない

things.onchange = function() { 
    alert(things[Key_Of_Value_That_Changed]); 
}; 

は方法も歓迎されている大きな優先順位ので非標準および/または習慣ではありません。

Answer 1

を使用し、最終的な製品です、およびSlaytherのanswerの修正版：

var things = { 
    "0": "apple", 
    set: function(key, val) { 
    var old = (this[key]) ? this[key] : null; 
    this["OLD_" + key] = old; 
    this[key] = val; 
    this.onchange(key, val, old); 
    }, 
    onchange: function(key, value, old) { 
    // handle "onchange" business here 
    } 
}; 

things.set("0", "pear"); 

Slaytherにもう一度感謝します。これを実際に見たい人は、Codepenにdemoがあります。

Answer 2

より一般的なセッター機能を使用できます（該当する場合は設定値を制御します）。

var things = { 
    "0": "apple", 
    "1": "mango", 
    "2": "pear", 
    // ect... 

    set_val: function (key, val) { 
    this[key] = val; 
    this.onchange(key); 
    }, 

    onchange: function() {} 
}; 

things.onchange = function(key) { 
    alert(key); 
}; 

Answer 3

通常は、あなたはProxyを使用することができ、値を設定するための機能を使用して、それがそこから呼び出されていますが、あなたは確認する必要があります場合は、この変更に呼び出される可能性があります。これにより、プロパティが設定されるたびに関数を呼び出すことができます。

var trueThings = new Proxy(things, { 
    set: // your function here 
}); 

EDIT 2016年10月3日：

機能を通過することを強制し、それがclosureを使用して、メインオブジェクトにアクセスし、シェルのオブジェクトを作っているのがより広くサポートされている方法があります。 Proxyのように、それはオブジェクト（プライベートに保たれます）をラップし、それを操作するためのツールを提供します。あなたはそれを作成するには、次の機能を使用することができます。

function makeShell(obj) { 
    function setCallback(k, v, obj) { 
     // your callback here 
    } 

    return { 
     get: function(k) { 
      return obj[k]; 
     }, 
     set: function(k, v) { 
      setCallback(k, v); 
      obj[k] = v; 
     } 
    } 
} 

Answer 4

あなたは要素を作成することができ、セットの要素がオブジェクトプロパティに属性、ここでMutationObserver

var things = { 
 
    "prop-0": "apple", 
 
    "prop-1": "mango", 
 
    "prop-2": "pear" 
 
    // ect... 
 
}; 
 

 
var obj = document.createElement("div"); 
 

 
for (var prop in things) { 
 
    obj.setAttribute(prop, things[prop]) 
 
}; 
 

 
var target = obj; 
 

 
var observer = new MutationObserver(function(mutations) { 
 
    mutations.forEach(function(mutation) { 
 
    things[mutation.attributeName] = obj.getAttribute(mutation.attributeName); 
 
    console.log(obj.getAttribute(mutation.attributeName) 
 
       , things); 
 
    }); 
 
}); 
 

 
var config = { 
 
    attributeFilter: Object.keys(things) 
 
}; 
 

 
observer.observe(target, config); 
 

 
obj.setAttribute("prop-0", "abc");