Difference between freeze and seal in Javascript

问题:

I just heard about the JavaScript methods freeze and seal, which can be used to make any Object immutable.

Here's a short example how to use it:

var o1 = {}, o2 = {};
Object.freeze(o2);

o1["a"] = "worked";
o2["a"] = "worked";

alert(o1["a"]);   //prints "worked"
alert(o2["a"]);   //prints "undefined"

What is the difference between these methods and can they increase performance?

回答1:

Object.seal

• It prevents adding and/or removing properties from the sealed object; using delete will return false
• It makes every existing property non-configurable: they cannot be converted from 'data descriptors' to 'accessor descriptors' (and vice versa), and no attribute of accessor descriptors can be modified at all (whereas data descriptors can change their writable attribute, and their value attribute if writeable is true).
• Can throw a TypeError when attempting to modify the value of the sealed object itself (most commonly in strict mode)

Object.freeze

• Exactly what Object.seal does, plus:
• It prevents modifying any existing properties

Neither one affects 'deep'/grandchildren objects (e.g. if obj is frozen or sealed, obj.el can't be changed, but obj.el.id can).

---

Performance:

Sealing or freezing an object may affect its enumeration speed, depending on the browser:

• Firefox: enumeration performance is not impacted
• IE: enumeration performance impact is negligible
• Chrome: enumeration performance is faster with sealed or frozen objects
• Safari: sealed or frozen objects enumerate 92% slower (as of 2014)

Tests: Sealed objects, Frozen objects.

回答2:

You can always looks these up in MDN. In short:

• Freeze: makes the object immutable, meaning no change to defined property allowed, unless they are objects.
• Seal: prevent addition of properties, however defined properties still can be changed.

回答3:

I wrote a test project which compares these 3 methods:

• Object.freeze()
• Object.seal()
• Object.preventExtensions()

My unit tests cover CRUD cases:

• [C] add new property
• [R] read existed property
• [U] modify existed property
• [D] remove existed property

Result:

回答4:

Object.freeze() creates a frozen object, which means it takes an existing object and essentially calls Object.seal() on it, but it also marks all “data accessor” properties as writable:false, so that their values cannot be changed. - Kyle Simpson, You Don't Know JS - This & Object Prototypes

回答5:

I was looking at the differences between Freeze and Seal in ECMAScript 5 and created a script to clarify the differences. Frozen creates an immutable object including data and structure. Seal prevents changes to the named interfaces - no adds, deletes - but you can mutate the object and redefine the meaning of its interface.

function run()
{
    var myObject = function() 
    { 
        this.test = "testing"; 
    }

    //***************************SETUP****************************

    var frozenObj = new myObject();
    var sealedObj = new myObject();

    var allFrozen = Object.freeze(frozenObj);
    var allSealed = Object.seal(sealedObj);
    alert("frozenObj of myObject type now frozen - Property test= " + frozenObj.test);
    alert("sealedObj of myObject type now frozen - Property test= " + sealedObj.test);

    //***************************FROZEN****************************

    frozenObj.addedProperty = "added Property"; //ignores add
    alert("Frozen addedProperty= " + frozenObj.addedProperty);
    delete frozenObj.test; //ignores delete
    alert("Frozen so deleted property still exists= " + frozenObj.test);
    frozenObj.test = "Howdy"; //ignores update
    alert("Frozen ignores update to value= " + frozenObj.test);
    frozenObj.test = function() { return "function"; } //ignores
    alert("Frozen so ignores redefinition of value= " + frozenObj.test);

    alert("Is frozen " + Object.isFrozen(frozenObj));
    alert("Is sealed " + Object.isSealed(frozenObj));
    alert("Is extensible " + Object.isExtensible(frozenObj));

    alert("Cannot unfreeze");
    alert("result of freeze same as the original object: " + (frozenObj === allFrozen).toString());

    alert("Date.now = " + Date.now());

    //***************************SEALED****************************

    sealedObj.addedProperty = "added Property"; //ignores add
    alert("Sealed addedProperty= " + sealedObj.addedProperty);
    sealedObj.test = "Howdy"; //allows update
    alert("Sealed allows update to value unlike frozen= " + sealedObj.test);
    sealedObj.test = function() { return "function"; } //allows
    alert("Sealed allows redefinition of value unlike frozen= " + sealedObj.test);
    delete sealedObj.test; //ignores delete
    alert("Sealed so deleted property still exists= " + sealedObj.test);
    alert("Is frozen " + Object.isFrozen(sealedObj));
    alert("Is sealed " + Object.isSealed(sealedObj));
    alert("Is extensible " + Object.isExtensible(sealedObj));

    alert("Cannot unseal");
    alert("result of seal same as the original object: " + (sealedObj === allSealed).toString());

    alert("Date.now = " + Date.now());
}

回答6:

I know I may be little late but

• Similarity: both of them are used for creating non extensible objects.
• Difference : In Freeze configurable , enumerable and writable attributes of the object are set to false. where as in Sealed writable attribute is set to true and rest of the attributes are false.

回答7:

You can now force a single object property to be frozen instead of freezing the whole object. You can achieve this with Object.defineProperty with writable: false as a parameter.

var obj = {
    "first": 1,
    "second": 2,
    "third": 3
};
Object.defineProperty(obj, "first", {
    writable: false,
    value: 99
});

In this example, obj.first now has its value locked to 99.