JS Object構(gòu)造函數(shù)之Object.freeze
Object.freeze(obj)可以凍結(jié)一個(gè)對象。一個(gè)被凍結(jié)的對象再也不能被修改;
凍結(jié)了一個(gè)對象則不能向這個(gè)對象添加新的屬性,不能刪除已經(jīng)屬性,不能修改該對象已有屬性的可枚舉性、可配置性、可寫性、以及不能修改已有屬性的值。
此外,凍結(jié)一個(gè)對象后該對象的原型也不能被修改。freeze()返回和傳入的參數(shù)是相同的對象。
JavaScriptDemo: Object.freeze()
const obj = { prop:42}Object.freeze(obj)obj.prop = 33 // 嚴(yán)格模式下會(huì)拋出錯(cuò)誤。console.log(obj.prop) // 42示例1) 凍結(jié)對象
var obj = { prop: function() {}, foo:’bar’}// 作為參數(shù)傳遞的對象與返回的對象都被凍結(jié)// 所以不必保存返回的對象 (因?yàn)閮蓚€(gè)對象全等)var o = Object.freeze(obj)o === obj // true// 現(xiàn)在開始任何改變都將失效obj.foo = ‘he’ //不做任何事Obj.hxx = ’he’ // 不添加此屬性// 試圖通過Object.defineProperty 更改屬性// 下面兩個(gè)語句都會(huì)拋出異常Object.defineProperty(obj,’foo’,{value:’yy’})Object.defineProperty(obj,’sex’,{value:’女’})// 也不能更改原型// 下面兩個(gè)語句都會(huì)拋出異常Object.setPrototypeOf(obj,{x:20})Obj.__prorp__ = {x:20}2) 凍結(jié)數(shù)組
let a = [0]Object.freeze(a) // 現(xiàn)在數(shù)組不能被更改了a[0] = 1 // 失敗a.push(2) // 失敗
被凍結(jié)的對象是不可改變的。但也不總是這樣。下面展示了凍結(jié)對象不是常量對象(淺凍結(jié))
3) 淺凍結(jié)let obj = { internal: {}}Object.freeze(obj)obj.internal.a = ‘he’console.log(obj.internal.a) // he
要使對象不可變,需要遞歸凍結(jié)每個(gè)類型為對象的屬性(深凍結(jié))
4) 深凍結(jié)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)) { // 跳過原型鏈上的屬性和已凍結(jié)的對象. continue } deepFreeze1(prop) }}
深凍結(jié)的用處一般我們在需要一個(gè)屬性,但是一開始它為空或者不存在,那么你僅需要設(shè)置一些初始值
title: '樓層銷售',value: '',options: [],存在的意義
如果你有一個(gè)巨大的數(shù)組或者Object,并且確定數(shù)據(jù)不會(huì)改變,使用Object.freeze()可以讓性能大幅度提升。Object.freeze()凍結(jié)的是值,你仍然可以將變量的引用替換掉。
new vue({ data: { // vue不會(huì)對list里的object做getter、setter綁定 list: Object.freeze([ { value: 1 }, { value: 2 } ]) }, mounted () { // 界面不會(huì)有響應(yīng) this.list[0].value = 100; // 下面兩種做法,界面都會(huì)響應(yīng) this.list = [ { value: 100 }, { value: 200 } ]; this.list = Object.freeze([ { value: 100 }, { value: 200 } ]); }})
以上就是JS Object構(gòu)造函數(shù)之Object.freeze的詳細(xì)內(nèi)容,更多關(guān)于JS Object.freeze的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. js實(shí)現(xiàn)跳一跳小游戲2. JVM之class文件結(jié)構(gòu)3. js實(shí)現(xiàn)貪吃蛇小游戲(加墻)4. XMLDOM對象方法:對象屬性5. python對批量WAV音頻進(jìn)行等長分割的方法實(shí)現(xiàn)6. Html5播放器實(shí)現(xiàn)倍速播放的方法示例7. asp.net core 認(rèn)證和授權(quán)實(shí)例詳解8. CSS linear-gradient屬性案例詳解9. Ajax報(bào)錯(cuò)400的參考解決辦法10. Python中Anaconda3 安裝gdal庫的方法
