淺談JS如何實(shí)現(xiàn)真正的對(duì)象常量
前言
眾所周知ES6新增的const關(guān)鍵字可以用來聲明常量,但是它只對(duì)基本數(shù)據(jù)類型生效(Number、String、Boolean等),那如果我們想聲明一個(gè)常量對(duì)象呢?該如何實(shí)現(xiàn),Object內(nèi)置對(duì)象早就替我們想到了,下面來具體看一下
正題
一、先來看一下const方式來聲明基本類型常量
代碼:
const name = 'jack' name = 'lucy' // 修改name常量
運(yùn)行結(jié)果:
可以看到,控制臺(tái)報(bào)錯(cuò)了,所以基本類型常量一旦聲明復(fù)制,就不能在被修改
二、再來用const方式來聲明復(fù)雜類型常量(即對(duì)象常量)
代碼:
const Obj = { name: 'jack' } Obj.name = 'lucy' // 修改屬性 Obj.age = 23 // 擴(kuò)展屬性 console.log(Obj.name) console.log(Obj.age) delete Obj.age console.log(Obj.age) // 刪除屬性 Obj = { name: 'sam' }
運(yùn)行結(jié)果:
結(jié)果表明:對(duì)象常量只是不允許修改引用地址,但是屬性還是可以被修改、擴(kuò)展和刪除的
要想得到一個(gè)真正的對(duì)象常量,我們無非要做的就是以下三點(diǎn):
1.對(duì)象的屬性不得被擴(kuò)展
2.對(duì)象的屬性不得被刪除
3.對(duì)象的屬性不得被修改
(1) 首先,如何做的對(duì)象屬性不會(huì)被擴(kuò)展呢?我們可以用Object.preventExtensions方法做到這一點(diǎn)
代碼:
var Obj = { name: 'jack' } Object.preventExtensions(Obj) Obj.age = 23 // 擴(kuò)展屬性 console.log(Obj.age) // undefined(說明擴(kuò)展失敗了)
運(yùn)行結(jié)果:
(2) 接著,擴(kuò)展的問題解決了,那如何實(shí)現(xiàn)屬性不會(huì)被刪除呢?不必?fù)?dān)心,我們有Object.seal方法,該方法不僅可以保證對(duì)象的屬性不會(huì)被擴(kuò)展,而且還能防止屬性被刪除
代碼:
var Obj = { name: 'jack' } Object.seal(Obj) Obj.age = 23 // 擴(kuò)展屬性 console.log(Obj.age) // undefined(說明擴(kuò)展失敗了) delete Obj.name // 刪除屬性 console.log(Obj.name) // 'jack'(說明刪除失敗了)
運(yùn)行結(jié)果:
(3) 擴(kuò)展和刪除的問題都已經(jīng)得到了解決,就剩下屬性不得被修改的問題了,那么我們清楚終極Boss:Object.freeze,它可以做的對(duì)象既不可被擴(kuò)展和刪除,而且還不被修改
代碼:
var Obj = { name: 'jack' } Object.freeze(Obj) Obj.age = 23 // 擴(kuò)展屬性 console.log(Obj.age) // undefined(說明擴(kuò)展失敗了) delete Obj.name // 刪除屬性 console.log(Obj.name) // 'jack'(說明刪除失敗了) Obj.name = 'lucy' // 修改屬性 console.log(Obj.name) // 'jack'(說明修改失敗)
運(yùn)行截圖:
/***************************分割線*******************************/
以上就是一步步的演示如何實(shí)現(xiàn)一個(gè)真正的對(duì)象常量,但是有如下兩個(gè)問題:
1.如果我們調(diào)用了這三個(gè)方法中的任何一個(gè),然后我們?cè)偃プ鏊鼈兯沟男袨椋╬reventExtensions禁止擴(kuò)展屬性,seal禁止刪除屬性,freeze禁止修改屬性),那么,如果在嚴(yán)格模式下,程序會(huì)報(bào)錯(cuò),所以我們要謹(jǐn)慎使用
2.Object.freeze雖然實(shí)現(xiàn)了真正的對(duì)象常量,但是它的一切操作只在頂級(jí)對(duì)象屬性上生效,下面的代碼說明了這一問題
代碼:
var Obj = { name: 'jack', extraInfo: { age: 23 } } Object.freeze(Obj) Obj.extraInfo.age = 80 console.log(Obj.extraInfo.age) // 80
運(yùn)行截圖:
所以要想真正實(shí)現(xiàn)常量對(duì)象,我們需要以樹的形式把對(duì)象的子孫對(duì)象都freeze,Object.freeze和遞歸可以解決該問題
// constantize實(shí)現(xiàn)遞歸freeze var constantize = (obj) => { Object.freeze(obj); Object.keys(obj).forEach( (key, i) => { if ( typeof obj[key] === 'object' ) { constantize( obj[key] ); } }); } var Obj = { name: 'jack', extraInfo: { age: 23 } } constantize(Obj) Obj.extraInfo.age = 80 console.log(Obj.extraInfo.age) // 23
結(jié)語
以上就是常量對(duì)象的一些知識(shí)點(diǎn),日常開發(fā)中,我們可以引入對(duì)象常量這個(gè)概念,來配置默認(rèn)參數(shù)對(duì)象或一些配置信息,使我們的代碼更加嚴(yán)謹(jǐn)
這篇淺談JS如何實(shí)現(xiàn)真正的對(duì)象常量就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)16進(jìn)制顏色值轉(zhuǎn)RGB的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)16進(jìn)制顏色值轉(zhuǎn)RGB的方法,是javascript比較典型的數(shù)值轉(zhuǎn)換應(yīng)用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02

javascript json字符串到j(luò)son對(duì)象轉(zhuǎn)義問題

Javascript?中?var?和?let?、const?的區(qū)別及使用方法

跨域請(qǐng)求兩種方法 jsonp和cors的實(shí)現(xiàn)

原生JS實(shí)現(xiàn)風(fēng)箱式demo,并封裝了一個(gè)運(yùn)動(dòng)框架(實(shí)例代碼)