Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Freeze Object – object.freeze ()

The object.freeze () method freezes an Object. A frozen object can no longer be modified. If you freeze an object, you cannot add new attributes to the object, delete existing attributes, modify the enumerability, configurability, writability of existing attributes of the object, or modify the value of existing attributes. In addition, the stereotype of an object cannot be modified after it is frozen. Freeze () returns the same object as the argument passed in. (Explanation from MDN)

Add or delete check change

The above concept is all about the properties of an object that can be added or deleted after we freeze it.

Var obj = {name: 'obj'}; Object.freeze(obj); /********** attributes **********/ / add obj.age = 18; console.log(obj); } // delete delete obj.name; console.log(obj); } // check console.log(obj.name); // obj. Name = 'yd'; console.log(obj); / / {name: "orange someone}" / * * * * * * * * * * prototype properties * * * * * * * * * * / / / to add (delete check change can also, don't write) obj. __proto__. Age = 18; console.log(obj); // {name: "Prototype ", [[Prototype]]: {age: 18}}; // Override the entire prototype object obj.__proto__ = {}; // error: Uncaught TypeError: #<Object> is not extensibleCopy the code

Conclusion: The frozen object cannot add, delete or modify its own attributes, but can only be checked; The object’s prototype object is the same as usual, but you can’t directly override the entire prototype object.

The return value

Var obj = {name: 'obj'}; var o = Object.freeze(obj); console.log(obj === o); // true console.log(Object.freeze(123)); // 123 console.log(Object.freeze('123')); // '123' console.log(Object.freeze(true)); // true console.log(Object.freeze(() => {})); / / () = > {}Copy the code

Conclusion: Object.freeze() returns a frozen Object in environments above ES6; However, in the ES5 environment, an error is reported if the parameter is not an object.

(Run it in any of the lower versions of Internet Explorer.)

Shallow frozen

What is a shallow freeze? This is similar to shallow copy. When it comes to object operations, we should always be aware of the problems that may be caused by inserting objects into objects.

Var obj = {name: {nickname: ' ' '}}; var o = Object.freeze(obj); obj.name.nickname = 'yd'; console.log(obj); // {name: {nickname: 'yd'}} obj.name.nickname = 'YD'; console.log(obj); // {name: {nickname: 'YD'}} delete obj.name.nickname; console.log(obj); // {name: {}}Copy the code

Conclusion: The frozen object, only the first layer will be frozen, the deep-level attributes remain as usual, can be added, deleted, checked and changed normally.

Deep freeze

Since the object.freeze () method is only a shallow freeze, how do we freeze a complete Object completely?

Object.deepfreeze = (obj) => {// Why not use object.keys () because it can't get properties that can't be enumerated, We want to ensure access to all key var propNames = Object. GetOwnPropertyNames (obj); propNames.forEach(function(name) { var prop = obj[name]; if (typeof prop === 'object' && prop ! == null) {// Recursive object.deepfreeze (prop); }}); return Object.freeze(obj); } var obj = {nickname: 'booty'}}; var o = Object.deepFreeze(obj); obj.name.nickname = 'yd'; console.log(obj); // {name: {nickname: 'booty '}} obj.name.nickname = 'YD'; console.log(obj); // {name: {nickname: 'orange '}} delete obj.name.nickname; console.log(obj); // {name: {nickname: 'orange '}}Copy the code

Conclusion: Deep freezing can be resolved by recursive processing.

Seal Object -object.seal ()

The object.seal () method seals an Object, preventing the addition of new properties and marking all existing properties as unconfigurable. The value of the current property can be changed as long as it was previously writable. (Explanation from MDN)

This is similar to the object.freeze () method, but it allows changes!!

Add or delete check change

Let’s go back to the example above. Pay attention to the notes.

Var obj = {name: 'obj'}; Object.seal(obj); /********** attributes **********/ / add obj.age = 18; console.log(obj); } // delete delete obj.name; console.log(obj); } // check console.log(obj.name); // obj. Name = 'yd'; console.log(obj); // {name: "yd"}!! Can be changed!! / * * * * * * * * * * prototype properties * * * * * * * * * * / / / to add (delete check change can also, don't write) obj. __proto__. Age = 18; console.log(obj); // {name: "yd", [[Prototype]]: {age: 18}}; // Override the entire prototype object obj.__proto__ = {}; // error: Uncaught TypeError: #<Object> is not extensibleCopy the code

Conclusion: The frozen object cannot add or delete its own attributes, but can only be modified. The object’s prototype object is the same as usual, but you can’t directly override the entire prototype object.

The return value

Freeze (); Object. Freeze (); Object.

Shallow seal

Freeze (); Object. Freeze (); Object.

Deep seal

Object.deepSeal = (obj) => {
  var propNames = Object.getOwnPropertyNames(obj);
  propNames.forEach(function(name) {
    var prop = obj[name];
    if (typeof prop === 'object' && prop !== null) {
      Object.deepSeal(prop);
    }
  });
  return Object.seal(obj);
}
Copy the code

At this point, this article is finished, sa Hua Sa hua.

I hope this article has been helpful to you. If you have any questions, I am looking forward to your comments. Same old, likes + comments = you know it, favorites = you know it.