Object.freeze() is a new feature in ES5 that freezes an Object, which prevents modification of existing properties and means that the response system can no longer track changes.
The object.freeze () method can freeze an Object. Freeze means that you cannot add new attributes to the Object, modify the value of existing attributes, delete existing attributes, and modify the enumerability, configurability, and writability of existing attributes of the Object. This method returns the frozen object.
Vue1.0.18 + supports this. For data or vuex objects that are frozen using freeze, Vue does not convert getters to setters.Copy the code

To illustrate freezing an array:

let arr = [0];
Object.freeze(a); // The array cannot be modified now.

arr[0] =1; // fails silently
arr.push(2); // fails silently

// In strict mode such attempts will throw TypeErrors
function fail() {
  "use strict"
  arr[0] = 1;
  arr.push(2);
}

fail();
Copy the code

What is the purpose of object.freeze ()?

Assuming you have a large array or Object and are sure the data won’t change, using object.freeze () can give performance a big boost. In my actual development, the increase is about 5 to 10 times, increasing with the amount of data.

For purely displayed big data, you can use Object.freeze to improve performance. Ex. :

var obj = {
  prop: function() {},
  foo: 'bar'
};

// New attributes will be added, existing attributes may
// Can be modified or removed
obj.foo = 'baz';
obj.lumpy = 'woof';
delete obj.prop;

// The object passed as an argument and the object returned are frozen
// There is no need to save the returned object (because both objects are congruent)
var o = Object.freeze(obj);

o === obj; // true
Object.isFrozen(obj); // === true

// Now any changes will be invalid
obj.foo = 'quux'; // Do nothing silently
// Silently do not add this property
obj.quaxxor = 'the friendly duck';

// In strict mode, such behavior throws TypeErrors
function fail(){
  'use strict';
  obj.foo = 'sparky'; // throws a TypeError
  delete obj.quaxxor; // Returns true because the quaxxor attribute was never added
  obj.sparky = 'arf'; // throws a TypeError
}

fail();

// An attempt was made to change the property via object.defineProperty
// Both of the following statements raise TypeError.
Object.defineProperty(obj, 'ohai', { value: 17 });
Object.defineProperty(obj, 'foo', { value: 'eit' });

// The prototype cannot be changed either
// Both of the following statements raise TypeError.
Object.setPrototypeOf(obj, { x: 20 })
obj.__proto__ = { x: 20 }



// The frozen object is immutable. But not always. The following example shows that a frozen object is not a constant object (shallow frozen).
obj1 = {
  internal: {}};Object.freeze(obj1);
obj1.internal.a = 'aValue';

obj1.internal.a // 'aValue'

// For a constant object, the entire reference graph (directly and indirectly referencing other objects) can only refer to immutable frozen objects. Frozen objects are considered immutable because the entire object state (values and references to other objects) within the entire object is fixed. Note that strings, numbers, and booleans are always immutable, while functions and arrays are objects.

To make an object immutable, you need to recursively freeze each property of type object (deep freeze). When you know that the object does not contain any loops (circular references) in the reference graph, the pattern will be used one by one depending on your design, otherwise an infinite loop will be triggered. An enhancement to deepFreeze() would be an internal function with a receive path (such as Array) argument so that deepFreeze() could be called recursively when the object goes into immutable. You still run the risk of freezing things that shouldn't be frozen.

// Deep freeze function.
function deepFreeze(obj) {

  // Get the property name defined on obj
  var propNames = Object.getOwnPropertyNames(obj);

  // Freeze attributes before freezing themselves
  propNames.forEach(function(name) {
    var prop = obj[name];

    // If prop is an object, freeze it
    if (typeof prop == 'object'&& prop ! = =null)
      deepFreeze(prop);
  });

  // Freeze yourself (no-op if already frozen)
  return Object.freeze(obj);
}

obj2 = {
  internal: {}}; deepFreeze(obj2); obj2.internal.a ='anotherValue';
obj2.internal.a; // undefinedA small way to keep freezingvar constantize = (obj) = > {
	Object.freeze(obj);
	Object.keys(obj).forEach( (key, i) = > {
		if(typeof obj[key] === 'object') { contantize(obj[key]); }}); };Copy the code

Post code references from: developer.mozilla.org/zh-CN/docs/…