前言

眾所周知ES6新增的const關(guān)鍵字可以用來(lái)聲明常量,但是它只對(duì)基本數(shù)據(jù)類(lèi)型生效(Number、String、Boolean等),那如果我們想聲明一個(gè)常量對(duì)象呢?該如何實(shí)現(xiàn),Object內(nèi)置對(duì)象早就替我們想到了,下面來(lái)具體看一下

正題

一、先來(lái)看一下const方式來(lái)聲明基本類(lèi)型常量

代碼:

1 const name = 'jack'2 name = 'lucy'    // 修改name常量

運(yùn)行結(jié)果:

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)


可以看到,控制臺(tái)報(bào)錯(cuò)了,所以基本類(lèi)型常量一旦聲明復(fù)制,就不能在被修改

二、再來(lái)用const方式來(lái)聲明復(fù)雜類(lèi)型常量(即對(duì)象常量)

代碼:

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 1 const Obj = { 2    name: 'jack' 3 } 4  5 Obj.name = 'lucy' // 修改屬性 6 Obj.age = 23 // 擴(kuò)展屬性 7 console.log(Obj.name) 8 console.log(Obj.age) 9 10 delete Obj.age11 console.log(Obj.age) // 刪除屬性12 13 Obj = {14    name: 'sam'15 }

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

運(yùn)行結(jié)果:

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

結(jié)果表明:對(duì)象常量只是不允許修改引用地址,但是屬性還是可以被修改、擴(kuò)展和刪除的

 

要想得到一個(gè)真正的對(duì)象常量,我們無(wú)非要做的就是以下三點(diǎn):
1.對(duì)象的屬性不得被擴(kuò)展
2.對(duì)象的屬性不得被刪除
3.對(duì)象的屬性不得被修改

(1) 首先,如何做的對(duì)象屬性不會(huì)被擴(kuò)展呢?我們可以用Object.preventExtensions方法做到這一點(diǎn)

代碼:

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

1 var Obj = {2    name: 'jack'3 }4 5 Object.preventExtensions(Obj)6 7 Obj.age = 23 // 擴(kuò)展屬性8 console.log(Obj.age) // undefined(說(shuō)明擴(kuò)展失敗了)

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

運(yùn)行結(jié)果:

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

(2) 接著,擴(kuò)展的問(wèn)題解決了,那如何實(shí)現(xiàn)屬性不會(huì)被刪除呢?不必?fù)?dān)心,我們有Object.seal方法,該方法不僅可以保證對(duì)象的屬性不會(huì)被擴(kuò)展,而且還能防止屬性被刪除

代碼:

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 1 var Obj = { 2    name: 'jack' 3 } 4  5 Object.seal(Obj) 6  7 Obj.age = 23 // 擴(kuò)展屬性 8 console.log(Obj.age) // undefined(說(shuō)明擴(kuò)展失敗了) 9 10 delete Obj.name // 刪除屬性11 console.log(Obj.name) // 'jack'(說(shuō)明刪除失敗了)

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

運(yùn)行結(jié)果:

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

(3) 擴(kuò)展和刪除的問(wèn)題都已經(jīng)得到了解決,就剩下屬性不得被修改的問(wèn)題了,那么我們清楚終極Boss:Object.freeze,它可以做的對(duì)象既不可被擴(kuò)展和刪除,而且還不被修改

代碼:

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 1 var Obj = { 2    name: 'jack' 3 } 4  5 Object.freeze(Obj) 6  7 Obj.age = 23 // 擴(kuò)展屬性 8 console.log(Obj.age) // undefined(說(shuō)明擴(kuò)展失敗了) 9 10 delete Obj.name // 刪除屬性11 console.log(Obj.name) // 'jack'(說(shuō)明刪除失敗了)12 13 Obj.name = 'lucy' // 修改屬性14 console.log(Obj.name) // 'jack'(說(shuō)明修改失敗)

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

運(yùn)行截圖:

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 

/***************************分割線*******************************/


以上就是一步步的演示如何實(shí)現(xiàn)一個(gè)真正的對(duì)象常量,但是有如下兩個(gè)問(wèn)題:

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ì)象屬性上生效,下面的代碼說(shuō)明了這一問(wèn)題

代碼:

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 1 var Obj = { 2    name: 'jack', 3    extraInfo: { 4      age: 23 5    } 6 } 7  8 Object.freeze(Obj) 9 10 Obj.extraInfo.age = 8011 console.log(Obj.extraInfo.age)  // 80

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

運(yùn)行截圖:

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

所以要想真正實(shí)現(xiàn)常量對(duì)象,我們需要以樹(shù)的形式把對(duì)象的子孫對(duì)象都freeze,Object.freeze和遞歸可以解決該問(wèn)題

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 1 // constantize實(shí)現(xiàn)遞歸freeze 2 var constantize = (obj) => { 3    Object.freeze(obj); 4    Object.keys(obj).forEach( (key, i) => { 5       if ( typeof obj[key] === 'object' ) { 6         constantize( obj[key] ); 7      } 8    }); 9 }10 11 var Obj = {12    name: 'jack',13    extraInfo: {14       age: 2315    }16 }17 18 constantize(Obj)19 20 Obj.extraInfo.age = 8021 console.log(Obj.extraInfo.age)    // 23

大學(xué)生就業(yè)培訓(xùn),高中生培訓(xùn),在職人員轉(zhuǎn)行培訓(xùn),企業(yè)團(tuán)訓(xùn)

 

結(jié)語(yǔ)

以上就是常量對(duì)象的一些知識(shí)點(diǎn),日常開(kāi)發(fā)中,我們可以引入對(duì)象常量這個(gè)概念,來(lái)配置默認(rèn)參數(shù)對(duì)象或一些配置信息,使我們的代碼更加嚴(yán)謹(jǐn)

http://www.cnblogs.com/sampapa/p/7076472.html