JS如何?真正的對象常量

標籤：引用   資料   bool   png   code   nbsp   ons   內建對象   先來   

前言

眾所周知ES6新增的const關鍵字可以用來聲明常量，但是它只對基礎資料型別 (Elementary Data Type)生效（Number、String、Boolean等），那如果我們想聲明一個常量對象呢？該如何?，Object內建對象早就替我們想到了，下面來具體看一下

正題

一、先來看一下const方式來聲明基本類型常量

代碼：

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

運行結果：

可以看到，控制台報錯了，所以基本類型常量一旦聲明複製，就不能在被修改

二、再來用const方式來聲明複雜類型常量（即對象常量）

代碼：

 1 const Obj = { 2 　　 name: ‘jack‘ 3 } 4  5 Obj.name = ‘lucy‘ // 修改屬性 6 Obj.age = 23 // 擴充屬性 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 }

運行結果：

結果表明：對象常量只是不允許修改引用地址，但是屬性還是可以被修改、擴充和刪除的

 

要想得到一個真正的對象常量，我們無非要做的就是以下三點：
1.對象的屬性不得被擴充
2.對象的屬性不得被刪除
3.對象的屬性不得被修改

(1) 首先，如何做的對象屬性不會被擴充呢？我們可以用Object.preventExtensions方法做到這一點

代碼：

1 var Obj = {2 　　 name: ‘jack‘3 }4 5 Object.preventExtensions(Obj)6 7 Obj.age = 23 // 擴充屬性8 console.log(Obj.age) // undefined（說明擴充失敗了）

運行結果：

(2) 接著，擴充的問題解決了，那如何?屬性不會被刪除呢？不必擔心，我們有Object.seal方法，該方法不僅可以保證對象的屬性不會被擴充，而且還能防止屬性被刪除

代碼：

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

運行結果：

(3) 擴充和刪除的問題都已經得到瞭解決，就剩下屬性不得被修改的問題了，那麼我們清楚終極Boss：Object.freeze，它可以做的對象既不可被擴充和刪除，而且還不被修改

代碼：

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

運行：

 

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

以上就是一步步的示範如何?一個真正的對象常量，但是有如下兩個問題：

1.如果我們調用了這三個方法中的任何一個，然後我們再去做它們所禁止的行為（preventExtensions禁止擴充屬性，seal禁止刪除屬性，freeze禁止修改屬性），那麼，如果在strict 模式下，程式會報錯，所以我們要謹慎使用
2.Object.freeze雖然實現了真正的對象常量，但是它的一切操作只在頂級對象屬性上生效，下面的代碼說明了這一問題

代碼：

 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

運行：

所以要想真正實現常量對象，我們需要以樹的形式把對象的子孫對象都freeze，Object.freeze和遞迴可以解決該問題

 1 // constantize實現遞迴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

 

結語

以上就是常量對象的一些知識點，日常開發中，我們可以引入對象常量這個概念，來配置預設參數對象或一些配置資訊，使我們的代碼更加嚴謹

 

JS如何?真正的對象常量