JSFiddle - React, Tailwind, and code Playground
HTML
<div>
Before: a hasOwn "value": <input id="aBefore" type="checkbox"></input>
with value <input id="aBeforeValue" type="number"></input>
</div>
<div>
After: a hasOwn "value": <input id="aAfter" type="checkbox"></input>
with value <input id="aAfterValue" type="number"></input>
</div>
<div>
Before: b hasOwn "value": <input id="bBefore" type="checkbox"></input>
with value <input id="bBeforeValue" type="number"></input>
</div>
<div>
After: b hasOwn "value": <input id="bAfter" type="checkbox"></input>
with value <input id="bAfterValue" type="number"></input>
</div>
JavaScript
var protoA = {};
Object.defineProperties(protoA, {
_hiddenValue: {
writable: true,
value: 0
},
value: {
enumerable: true,
get: function getValue() { return this._hiddenValue; },
set: function setValue(val) {
console.log("Changing hiddenValue from (" + this._hiddenValue + ") to (" + val + ")...");
this._hiddenValue = val;
}
}
});
var protoB = { value: 0 };
var a = { __proto__: protoA };
var b = { __proto__: protoB };
document.getElementById('aBefore').checked = a.hasOwnProperty('value');
document.getElementById('aBeforeValue').value = a.value;
a.value = 1;
document.getElementById('aAfter').checked = a.hasOwnProperty('value');
document.getElementById('aAfterValue').value = a.value
document.getElementById('bBefore').checked = b.hasOwnProperty('value');
document.getElementById('bBeforeValue').value = b.value;
b.value = 2;
document.getElementById('bAfter').checked = b.hasOwnProperty('value');
document.getElementById('bAfterValue').value = b.value