如何在Javascript中使用Object.freeze()

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); 複製代碼

結果

非嚴格模式

image.png

添加嚴格模式

"use strict";
複製代碼

image.png

拋出異常提示該屬性是隻讀的

深度凍結

須要注意的是，若是被凍結的對象具備以對象做爲值的屬性，這些對象能夠被更改

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); 複製代碼

結果

image.png

發現對象第一層是被凍結了，可是第二層並無被凍結，這意味着咱們只實現了「淺凍結」 要經過凍結對象的全部屬性(包括那些將其餘對象存儲爲值的屬性)來使對象不可變，咱們必須執行「深度凍結」—即便用遞歸在凍結父對象以前凍結子對象。

遞歸凍結

const theObject = {
 x: 1,  z: 2,  y: {  a: "Hello",  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 ); 複製代碼

結果

image.png

在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從而避免這種資源的浪費，不要看它小，而忽略，不積跬步無以致千里