Creating new objects from frozen parent objects
Use Object.assign
var first = {
test: 10
};
Object.freeze(first);
//Create a second object from the first one and
//try and change the new test property (you can't)
var second = Object.assign({}, first, {
test: 20
});
console.log(second.test); //20
second
is in fact a new object, with first
being the prototype of second
. The reason why
second.test = 20;
does not work is because upon assignment, it will look for the settings on the prototype (i.e. configurable
, enumerable
, writable
, [[Extensible]]
) and not assign to the instance if any of these are false1. To assign directly to the instance, you'll have to use Object.defineProperty
on second
:
var first = {
test: 10
};
Object.freeze(first);
var second = Object.create(first);
Object.defineProperty(second, 'test', { value: 20, enumerable: true, configurable: true, writable: true });
console.log(second.test); // 20
1: [[Put]]
: the ECMAScript Specification, §8.12.5
In your case second
is a reference to first
(like you assumed). A solution would be to clone your object. There is no build in way to clone objects - you have to do it yourself, here is how (source):
function clone(obj){
if(obj == null || typeof(obj) != 'object')
return obj;
var temp = obj.constructor();
for(var key in obj)
temp[key] = clone(obj[key]);
return temp;
}
Then you use it this way:
var first = {
test: 10
};
Object.freeze(first);
// clone it into a new one
var second = clone(first);
second.test = 20;
console.log(second.test); // 20 where the first is locked