JS Object構造関数のObject.freeze

概要
Object.freeze(obj)はオブジェクトを凍結することができます。一つの凍結されたオブジェクトは二度と修正されません。
オブジェクトを凍結したら、このオブジェクトに新しい属性を追加できません。属性を削除することはできません。オブジェクトの既存の属性のエニュメレーション性、配置可能性、書き込み可能性、既存の属性の値を変更することはできません。
また、オブジェクトを凍結しても、そのオブジェクトの原型は変更できません。freeze()戻りと着信のパラメータは同じオブジェクトです。
JavaScript Demo：Object.freeze()

const obj = {
  prop：42
}
Object.freeze(obj)

obj.prop = 33 //           。

console.log(obj.prop) // 42

例
1）凍結対象

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

//                    
//             (        )
var o = Object.freeze(obj)
o === obj // true

//             

obj.foo = ‘he' //     
Obj.hxx = 'he' //       

//     Object.defineProperty     
//             
Object.defineProperty(obj,'foo',{value:'yy'})
Object.defineProperty(obj,'sex',{value:' '})

//        
//             
Object.setPrototypeOf(obj,{x:20})
Obj.__prorp__ = {x:20}

2）凍結配列

let a = [0]
Object.freeze(a) //           

a[0] = 1 //   
a.push(2) //   

凍結されたオブジェクトは変更できません。でも、いつもそうではないです。凍結対象が定数オブジェクトではないことを示しています。（浅い凍結）
3）浅い凍結

let obj = {
  internal: {}
}

Object.freeze(obj)
obj.internal.a = ‘he'
console.log(obj.internal.a) // he

オブジェクトを可変させないには、各タイプの属性を再帰的に凍結する必要があります。
4）深く凍結する

deepFreeze = (obj) => {
  var propNames = Object.getOwnPropertyNames(obj);
  propNames.forEach(function (name) {
    var prop = obj[name];
    if (typeof prop == 'object' && prop !== null) {
      deepFreeze(prop);
    }
  });
  Object.freeze(obj);
}


deepFreeze1 = (obj) => {
  var prop, propName
  Object.freeze(obj)
  for (propName in obj) {
    prop = obj[propName]
    if (!obj.hasOwnProperty(propName) || !(typeof prop === "object") || Object.isFrozen(prop)) {
      //                 .
      continue
    }
    deepFreeze1(prop)
  }
}

深度凍結の用途は一般的に属性が必要ですが、最初は空か存在しませんでした。初期値を設定する必要があります。

title: "    ",
value: "",
options: [],

存在の意義
巨大な配列やObjectがあれば、データは変わらないと判断し、Object.freezeを使って性能を大幅に向上させることができます。Object.freeze（）は凍結された値であり、変数の参照を置き換えることができます。

new vue({
  data: {
    // vue   list  object getter、setter  
    list: Object.freeze([
      { value: 1 },
      { value: 2 }
    ])
  },
  mounted () {
     //        
     this.list[0].value = 100;


     //       ，      
     this.list = [
       { value: 100 },
       { value: 200 }
     ];
     this.list = Object.freeze([
       { value: 100 },
       { value: 200 }
     ]);
  }
})

以上はJS Object構造関数のObject.freezeの詳細です。JS Object.freezeに関する資料は他の関連記事に注目してください。