Object.freeze()

The object.freeze () method can freeze an Object. A frozen object can no longer be modified; If an object is frozen, no new properties can be added to the object, no existing properties can be deleted, no enumerability, configurability, or writability of the existing properties of the object can be modified, and the value of the existing properties cannot be modified. In addition, the prototype of an object cannot be modified after the object is frozen. Freeze () returns the same object as the argument passed

usage

const objectExample = {
  prop1: 20.  prop2: "Mr. Sheep"
};

// By default, we can modify the properties of the object as needed objectExample.prop1 = 100; console.log(objectExample.prop1)  // Freeze the object Object.freeze(objectExample);  objectExample.prop2 = "Alice" // If strict mode will throw a failure, non-strict mode will only throw an exception  console.log(objectExample.prop2); Copy the code

The results of

Non-strict mode

image.png

Adding strict Mode

"use strict";
Copy the code
image.png

An exception is thrown indicating that the property is read-only

Deep freeze

Note that the frozen objects can be changed if they have properties with an object as a value

const theObject = {
  x: 1.  z: 2.  y: {
    a: "Hello". b: "Mr. Sheep"  } }  Object.freeze(theObject);  theObject.x = 100 console.log(theObject.x);  theObject.y.a = 'vipbic'; console.log(theObject.y.a); Copy the code
The results of
image.png

Object found the first layer is frozen, but the second layer has not been frozen, which means that we only shallow “freeze” must by freezing all attributes of the objects (including those other object storage properties of value) to make an immutable object, we must carry out the “deep freeze” – that is, using recursive freezing child objects before freezing parent object.

Recursive freeze

const theObject = {
  x: 1.  z: 2.  y: {
    a: "Hello". b: "Mr. Sheep"  } }  const deepFreeze = (obj) = > {   const propNames = Object.getOwnPropertyNames(obj)   for (const name of propNames) {  const value = obj[name];   if (value && typeof value === "object") {  deepFreeze(value);  }  }   return Object.freeze(obj); }  deepFreeze(theObject); theObject.y.a = 100; console.log(theObject.y.a ); Copy the code
The results of
image.png

Use object.freeze in Vue

In Vue 2.0, when you pass a normal JavaScript Object to the Data option of a Vue instance, Vue will iterate over all the properties of the Object and use object.defineProperty to turn them into getters/setters. These getters/setters are invisible to the user, but internally they let Vue track dependencies and notify changes when properties are accessed and modified

Sometimes in real life, we just store an object or array and don’t require it to respond to the view, but vue still listens for the array with object.defineProperty, which is a waste of performance, so we use object.freeze instead

<h4 v-for="(item,idx) in items" :key="idx">{{ item.text }}</h4>
Copy the code
data() {
    let data =  Object.freeze([{text:'Mr. Sheep'}, {text:'ipbic'}])
    return {
       msg: ' '.       items:data
 } }, mounted() {   this.items[0].text = 'Share happiness'; // The interface will not be updated   this.items = [{ text: 'itnavs'}, {text: 'Share happiness' }]; // The interface will be updated   this.items = Object.freeze([{ text: 'itnavs'}, {text: 'Share happiness' }]); // The interface will be updated }, Copy the code

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

To avoid this waste of resources, use object. freeze. Don’t look at it as small and ignore it