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 = 100console.log(theObject.x);theObject.y.a = ’vipbic’;console.log(theObject.y.a);

結果

發現對象第一層是被凍結了，但是第二層并沒有被凍結，這意味著我們只實現了「淺凍結」要通過凍結對象的所有屬性(包括那些將其他對象存儲為值的屬性)來使對象不可變，我們必須執行「深度凍結」—即使用遞歸在凍結父對象之前凍結子對象。

遞歸凍結

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

結果

在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()內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！