Object.freeze()

Object.freeze() 方法可以凍結一個物件。一個被凍結的物件再也不能被修改；凍結了一個物件則不能向這個物件新增新的屬性，不能刪除已有屬性，不能修改該物件已有屬性的可列舉性、可配置性、可寫性，以及不能修改已有屬性的值。此外，凍結一個物件後該物件的原型也不能被修改。freeze() 返回和傳入的引數相同的物件

用法

const objectExample = {
 prop1: 20,prop2: "羊先生"
};

// 預設情況下，我們可以根據需要修改物件的屬性
objectExample.prop1 = 100;
console.log(objectExample.prop1)

// 凍結物件
Object.freeze(objectExample);

objectExample.prop2 = "Alice" // 如果在嚴格模式會丟擲失敗，在非嚴格模式下只會丟擲異常

console.log(objectExample.prop2);

結果

非嚴格模式

新增嚴格模式

"use strict";

丟擲異常提示該屬性是隻讀的

深度凍結

需要注意的是，如果被凍結的物件具有以物件作為值的屬性，這些物件可以被更改

const theObject = {
 x: 1,z: 2,y: {
  a: "Hello",b: "羊先生"
 }
}

Object.freeze(theObject);

theObject.x = 100
console.log(theObject.x);

theObject.y.a = 'vipbic';
console.log(theObject.y.a);

結果

發現物件第一層是被凍結了，但是第二層並沒有被凍結，這意味著我們只實現了「淺凍結」

遞迴凍結

const theObject = {
 x: 1,b: "羊先生"
 }
}

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 );

結果

在Vue中使用Object.freeze

在vue2.0中，當你把一個普通的 JavaScript 物件傳給 Vue 例項的 data 選項，Vue 將遍歷此物件所有的屬性，並使用 Object.defineProperty 把這些屬性全部轉為 getter/setter，這些 getter/setter 對使用者來說是不可見的，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化

有時在實際應用中，我們只是用來儲存某個物件或者陣列，並不要求它響應對應的檢視，但在這個過程中vue還是會用object.defineProperty來監聽這個陣列，這樣就是一種效能浪費，所以我們闊以使用Object.freeze來凍結資料

<h4 v-for="(item,idx) in items" :key="idx">{{ item.text }}</h4>

data() {
  let data = Object.freeze([{text:'羊先生'},{text:'ipbic'}])
  return {
    msg: '',items:data
  }
},mounted() {

  this.items[0].text = '分享快樂'; // 介面不會更新

  this.items = [{ text: 'itnavs' },{ text: '分享快樂' }]; // 介面會更新

  this.items = Object.freeze([{ text: 'itnavs' },{ text: '分享快樂' }]); // 介面會更新
},

如果你有一個巨大的陣列或Object，並且確信資料不會修改，使用Object.freeze()可以讓效能大幅提升。在我的實際開發中，這種提升大約有5~10倍，倍數隨著資料量遞增

使用Object.freeze從而避免這種資源的浪費，不要看它小，而忽略，不積跬步無以至千里

到此這篇關於詳解如何在Javascript中使用Object.freeze()的文章就介紹到這了,更多相關Javascript Object.freeze()內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！