js儲存常量,使其只可讀,實現方式有哪些

2021-09-14 06:51:07 字數 3162 閱讀 6793

1 . es6語法中的常量宣告符 const

const freeze = 'strange'

freeze = 'tony' // => uncaught typeerror: assignment to constant variable.

如果const宣告乙個物件會如何?

const freezehero = 

freezehero = // => uncaught typeerror: assignment to constant variable.

// 改變該物件的屬性

freezehero.name = 'tony'

freezehero.skill = 'equip'

console.log(freezehero) // =>

const宣告的物件屬性仍然可以改變,因為僅僅只是變數指向的那個記憶體位址不能改動。

2 . object.freeze()

object.freeze()同樣也是es6新增的api

const freezeman = 

object.freeze(freezeman)

freezeman.name = 'strange'

freezeman.skill = 'magic'

console.log(freezeman) // =>

可以看到,物件的靜態屬性變為唯讀,不可修改,且不可以新增新屬性,如果屬性本身也是物件會如何?

const freezemen = 

object.freeze(freezemen)

freezemen.level = 4

// 修改物件的members屬性

console.log(freezemen) // =>

被鎖定的物件,屬性值為簡單型別時會被freeze,但值為物件時仍然可以修改,這與const宣告符的原理一致。下面通過遞迴的方式,實現物件引用的深層次鎖定,物件的任何屬性都不可重寫,也不可動態新增新屬性

const freezemen = 

const deeplock = function(obj)

})return obj

}deeplock(freezemen).members = ['captian', 'hulk']

freezemen.victory = true

console.log(freezemen) // =>

// 如果再想通過defineproperty方法來增加新屬性,會直接丟擲異常

object.defineproperty(freezemen, 'lastdefine', )

// => uncaught typeerror: cannot define property lastdefine, object is not extensible

3 . object.defineproperty

用這個方法實現的效果與freeze方法差不多,設定writable屬性值為唯讀,對於簡單值型別有效,而屬性值本身為物件時仍然是可以修改其值的。同樣可以使用遞迴來實現

var lockproperty = function(data) )

}return data

}var definediswritable = function(obj, key, val) )

if(typeof val === 'object')

}const freezemen =

}, level: 2

}lockproperty(freezemen)

freezemen.add = 'new key'

freezemen.level = 10

freezemen.members =

freezemen.members.people.name = 'modified'

console.log(freezemen) // => , level: 2}

// 我們試試使用defineproperty新增新屬性

object.defineproperty(freezemen, 'lastkey', )

console.log(freezemen) // => , level: 2, lastkey: 'last'}

上述方法也可以實現物件深層巢狀的屬性凍結,與object.freeze()的唯一區別是,傳遞的頂層物件仍然可以新增新的屬性(不管是通過動態新增還是object.defineproperty)。

還可以通過劫持setter來鎖定通過defineproperty方法新增的屬性。

var lockproperty = function(data) )

}return data

}var definediswritable = function(obj, key, val) ,

get: function() ,

enumerable: true

})if(typeof val === 'object')

}const freezemen =

}, level: 2

}lockproperty(freezemen)

freezemen.add = 'new key'

freezemen.level = 10

freezemen.members =

freezemen.members.people.name = 'modified'

console.log(freezemen) // => , level: 2}

_比較object.defineproperty()object.freeze()兩種方法的遞迴方案,對於複雜的資料物件,可以實現兩種情況:

1.要儲存乙個完全不可寫的資料,使用object.freeze();

2.要儲存乙個不可修改但可拓展的資料,使用object.defineproperty()

js 實現頁面只重新整理一次

頁面重新整理方法 1 history.go 0 2 location.reload 3 location location 4 location.assign location 5 document.execcommand refresh 6 window.n igate location 7 lo...

JS實現陣列去重(重複的元素只保留乙個)

1.遍歷陣列法 它是最簡單的陣列去重方法 indexof方法 實現思路 新建乙個陣列,遍歷去要重的陣列,當值不在新陣列的時候 indexof為 1 就加入該新陣列中 var arr 2,8,5,0,5,2,6,7,2 function unique1 arr return hash 2.陣列下標判斷...

JS實現陣列去重(重複的元素只保留乙個)

1.遍歷陣列法 它是最簡單的陣列去重方法 indexof方法 實現思路 新建乙個陣列,遍歷去要重的陣列,當值不在新陣列的時候 indexof為 1 就加入該新陣列中 var arr 2,8,5,0,5,2,6,7,2 function unique1 arr return hash 2.陣列下標判斷...