快捷導(dǎo)航

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

更新時(shí)間：2020年10月18日 09:24:06 作者：vipbic

這篇文章主要介紹了詳解如何在Javascript中使用Object.freeze()，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

Object.freeze()

Object.freeze() 方法可以凍結(jié)一個(gè)對(duì)象。一個(gè)被凍結(jié)的對(duì)象再也不能被修改；凍結(jié)了一個(gè)對(duì)象則不能向這個(gè)對(duì)象添加新的屬性，不能刪除已有屬性，不能修改該對(duì)象已有屬性的可枚舉性、可配置性、可寫性，以及不能修改已有屬性的值。此外，凍結(jié)一個(gè)對(duì)象后該對(duì)象的原型也不能被修改。freeze() 返回和傳入的參數(shù)相同的對(duì)象

用法

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

// 默認(rèn)情況下，我們可以根據(jù)需要修改對(duì)象的屬性
objectExample.prop1 = 100;
console.log(objectExample.prop1)

// 凍結(jié)對(duì)象
Object.freeze(objectExample);

objectExample.prop2 = "Alice" // 如果在嚴(yán)格模式會(huì)拋出失敗，在非嚴(yán)格模式下只會(huì)拋出異常

console.log(objectExample.prop2);

結(jié)果

非嚴(yán)格模式

添加嚴(yán)格模式

"use strict";

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

深度凍結(jié)

需要注意的是，如果被凍結(jié)的對(duì)象具有以對(duì)象作為值的屬性，這些對(duì)象可以被更改

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

結(jié)果

發(fā)現(xiàn)對(duì)象第一層是被凍結(jié)了，但是第二層并沒(méi)有被凍結(jié)，這意味著我們只實(shí)現(xiàn)了「淺凍結(jié)」
要通過(guò)凍結(jié)對(duì)象的所有屬性(包括那些將其他對(duì)象存儲(chǔ)為值的屬性)來(lái)使對(duì)象不可變，我們必須執(zhí)行「深度凍結(jié)」—即使用遞歸在凍結(jié)父對(duì)象之前凍結(jié)子對(duì)象。

遞歸凍結(jié)

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

結(jié)果

在Vue中使用Object.freeze

在vue2.0中，當(dāng)你把一個(gè)普通的 JavaScript 對(duì)象傳給 Vue 實(shí)例的 data 選項(xiàng)，Vue 將遍歷此對(duì)象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter，這些 getter/setter 對(duì)用戶來(lái)說(shuō)是不可見(jiàn)的，但是在內(nèi)部它們讓 Vue 追蹤依賴，在屬性被訪問(wèn)和修改時(shí)通知變化

有時(shí)在實(shí)際應(yīng)用中，我們只是用來(lái)存儲(chǔ)某個(gè)對(duì)象或者數(shù)組，并不要求它響應(yīng)對(duì)應(yīng)的視圖，但在這個(gè)過(guò)程中vue還是會(huì)用object.defineProperty來(lái)監(jiān)聽(tīng)這個(gè)數(shù)組，這樣就是一種性能浪費(fèi)，所以我們闊以使用Object.freeze來(lái)凍結(jié)數(shù)據(jù)

<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 = '分享快樂(lè)'; // 界面不會(huì)更新

  this.items = [{ text: 'itnavs' },{ text: '分享快樂(lè)' }]; // 界面會(huì)更新

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

如果你有一個(gè)巨大的數(shù)組或Object，并且確信數(shù)據(jù)不會(huì)修改，使用Object.freeze()可以讓性能大幅提升。在我的實(shí)際開發(fā)中，這種提升大約有5~10倍，倍數(shù)隨著數(shù)據(jù)量遞增

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

到此這篇關(guān)于詳解如何在Javascript中使用Object.freeze()的文章就介紹到這了,更多相關(guān)Javascript Object.freeze()內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: