> 本文首發於個人網站：[const關鍵字：終於擁有真正的常量宣告語句](https://jinyunlong.cc/books/ecmascript-6-plus-tutorial.html) 你好，今天大叔想和你嘮扯嘮扯 ES6 新增的關鍵字 —— `const`。在說 `const` 關鍵字之前，大叔先和你嘮嘮大叔自己對 `const` 的感受 —— JavaScript 尼瑪終於可以宣告真正的常量啦！大叔為啥會發出這樣滴感嘆？實在是“天下苦秦久矣”呀~ 話說 long long ago，當初大叔從 Java 技術棧轉向前端技術棧，首先要搞定的就是 JavaScript。雖然都說 JavaScript 和 Java 語言有很多的地方是相似滴，但你知道直到大叔發現這貨不能宣告常量時候的感受嗎？！那真是欲哭無淚啊~ 一個堂堂滴程式語言，居然尼瑪不能宣告常量？！也好意思說自己是個程式語言？！ ## 宣告常量 好吧~ 大叔不吐槽了，還是說正事兒吧。其實，在 ES5 裡面也不是不能宣告常量，就是有那麼一捏捏的彆扭。你知道 `Object` 有個叫做 `defineProperty()` 的方法吧？它是用來給某個物件定義屬性的。在 ES5 裡面就可以通過這個方法間接地來宣告常量。 比方說，你現在想在全域性作用域裡面宣告一個常量，其實就可以看作是給頂級物件新增一個屬性嘛。帶入個場景比較好整明白，假設是一個 HTML 頁面裡面宣告一個全域性常量，就可以像下面這樣整： ```javascript Object.defineProperty(window, 'a', { value: 'a', // 設定該屬性的值 writable: false // 設定該屬性的值不能寫 }) ``` 這段程式碼的意思就是給 `window` 物件增加一個名叫 `a` 的屬性。`writeable` 的作用就是這個屬效能不能寫，值為 `false` 就是隻能讀不能寫的意思。所以，這時的屬性 `a` 就只能訪問不能修改。不信咱可以試試： ```javascript console.log(a) ``` 這時列印的結果比較簡單，就是 a。接下來咱們再修改一下試試看是啥結果： ```javascript a = 'b' console.log(a) ``` 列印的結果還是 a，並沒有把 `a` 的值改成 b。 其實，這樣的用法已經很接近常量的用法了。但是，可但是，但可是~ 你不覺得彆扭嗎？！為啥？大叔給你屢屢： - 尼瑪我現在要宣告的是一個常量，你現在用的是定義屬性的語法。 - 這個示例還好，因為是宣告全域性常量，可以加到 `window` 這種頂級物件上。要是在一個函式作用域裡面咋辦，我找不準上下文物件咋辦？！ - 即使就用這個辦法能解決這個問題，也確實不能改值。但是，啥提示沒有，你不難受嗎？！ - 常量就是常量，屬性就是屬性。至少從概念上就別尼瑪混淆在一起，你說是不是？！ 所以，在 ES6 的新特性裡面，大叔終於看到希望 —— `const`。這貨才是真正用來定義常量滴！說到常量，大叔得先給你科普一下到底怎麼樣才算是常量。 所謂常量，簡單來說就是不能變化的值。其實，不僅不能值變化，還不能重複賦值，也不能重複宣告，這才算是對滴。 那接下來，大叔就給你看看 `const` 這貨能不能做到這一點： ```javascript const a = 'a' console.log(a) a = 'b' console.log(a) ``` 這段程式碼不難看出就是使用 `const` 關鍵字聲明瞭一個常量，兩處列印的結果分別為： - 第一處列印的結果是 a - 第二處列印的結果是報錯，報錯的內容是：`TypeError: Assignment to constant variable.`，大概的意思就是你把常量當變數賦值了。 看到了吧？！這才是常量。不僅不能改變值，而且會進行報錯，告訴你改變值這種行為是不對滴。 ### 宣告常量的注意事項 當然了，ES6 新增了這樣的語法，附帶的也有一些需要你注意的事兒 —— 就是在宣告一個常量的時候，是必須把常量進行初始化的。不能像宣告變數一樣，宣告和初始化可以分成兩個步驟完成。比方說像下面這樣嬸兒做： ```javascript const a a = 'a' ``` 這段程式碼執行之後的結果就是給你報個大錯，報錯的內容是：`SyntaxError: Missing initializer in const declaration`，大概的意思就是說你在宣告常量的時候沒給人家初始化。 你看看，整得多明白！釘兒是釘兒，卯兒是卯兒的。 ## 塊級作用域 再有就是，`const` 不僅提供一個真正可以宣告變數的方式，還提供了塊級作用域。啥？你還不知道呢？！那你就去看看大叔寫的[《let關鍵字：ES6新增的var關鍵字加強版》](https://jinyunlong.cc/books/ecmascript-6-plus-tutorial.html#%E7%AC%AC%E4%B8%80%E5%9B%9Elet%E5%85%B3%E9%94%AE%E5%AD%97%E5%8A%A0%E5%BC%BA%E7%89%88%E7%9A%84var%E5%85%B3%E9%94%AE%E5%AD%97)這篇文章裡面關於塊級作用域的內容吧。 在這兒呢，大叔想再次重申一下塊級作用域的好處 —— 就是會把之前暴露在全域性作用域的一些變數全部限制在一個具體的塊級作用域裡面。比方說像下面這樣嬸兒的程式碼： ```javascript if (true) { const a = 'a' } console.log(a) ``` 這段程式碼執行後列印的結果是報錯，報錯的內容是：`ReferenceError: f is not defined`。也就是說，你在一個塊級作用域裡面宣告一個常量，在這個塊級作用域之外是沒辦法訪問到這個常量的。 ## 暫時性死區（TDZ） 既然嘮到 `const` 宣告的常量是具有塊級作用域的，那就不能不說一下暫時性死區的問題了。啥意思呢？就是說使用 `const` 宣告的常量也同樣存在暫時性死區的，不信你來看段程式碼： ```javascript if (true) { console.log(a) const a = 'a' } ``` 這段程式碼執行後的結果是報錯，報錯的內容還是暫時性死區的錯誤：`ReferenceError: Cannot access 'a' before initialization`。 存在了暫時性死區了，就說明 `const` 宣告常量的時候也就不存在啥宣告提前的事兒了。這兩件事兒吧，其實說的是一個意思，你可得記明白了。 ## 宣告常量物件或者陣列 嘮到這兒吧，其實基本上關於 `const` 都嘮完了。這貨除了可以真正宣告一個常量之外，其實沒啥可嘮的啦。但是，但可是，可但是~ 嘿嘿~ 大叔想問你的問題：如果咱們用 `const` 宣告一個物件或者陣列，那這個物件的屬性或者數組裡面的元素能不能修改呢？ 尋思是尋思不明白的，咱們直接整程式碼吧，用事實來看看到是個啥情況。比方說咱們先宣告一個這樣嬸兒的物件： ```javascript const obj = { name: "不想成熟的大叔", age: 37 } ``` 大叔今年都 37 啦，但是年輕的心還是有滴。所以，大叔想把 `age` 這個屬性的值改成 18，就像這樣嬸兒的： ```javascript obj.age = 18 console.log(obj) ``` 結果~ 咱們執行程式碼之後得到的結果就是這樣嬸兒的： ```json { name: "不想成熟的大叔", age: 18 } ``` 注意啊~ 注意啊~ `age` 屬性的值被成功滴改成了 18！不對吧？`const` 宣告的不是常量嗎？常量不是不能改變值嗎？這尼瑪結果也不對啊？ 靈魂三連問也沒用，事實擺在眼吧前兒，咱就得認！但是，為啥會這樣涅？別急，且聽大叔給你慢慢道來~ 想整明白這個事兒吧，咱們就得先嘮扯嘮扯 JavaScript 的儲存結構了。JavaScript 的儲存結構有倆兒，一個叫做“堆記憶體”，一個叫做“棧記憶體”。一般情況下吧，咱們定義的變數或者常量都是儲存在堆記憶體裡面的。但是吧，物件和陣列算是 JavaScript 裡面比較複雜的一種資料，所以實際上物件或者陣列的儲存形式是這樣嬸兒的：  知道了這個事兒，你大概就能整明白為啥上面的程式碼執行的結果是這樣嬸兒的了吧？！說白了，`const` 宣告的物件的值確實不能改變，但是物件的值儲存的是一個引用地址，而具體的屬性其實是儲存在這個引用地址裡面，`const` 是沒辦法限制的。 整到這兒，你是不是想問那這樣嬸兒的問題要怎麼解決？嗯~ 也能解決的。你還記得 `Object` 提供了一個方法叫做 `freeze()` 嗎？這個方法是用來凍結某個物件的。凍結之後不能向這個物件新增新的屬性，不能刪除已有屬性，不能修改該物件已有屬性的可列舉性、可配置性、可寫性，以及不能修改已有屬性的值。所以，就可以利用這個方法來解決上面提到的問題： ```javascript const obj = { name: "不想成熟的大叔", age: 37 } Object.freeze(obj) obj.age = 18 console.log(obj) ``` 這樣處理之後，咱們再來看看列印後的結果吧： ```json { name: "不想成熟的大叔", age: 37 } ``` 問題被完美滴解決了！等一下，真的是這樣嬸兒的嗎？大叔想繼續再操作一下下的，比方說像這樣嬸兒的： ```javascript const obj = { name: "不想成熟的大叔", age: 37, skill: { name: "coding", year: 15 } } ``` 啥意思？就是說咱們在宣告一個物件的時候，這個物件的屬性也同樣是一個物件或者陣列，那現在的問題就是你利用 `Object.freeze()` 方法還能成功地凍結不？咱們就來試試吧： ```javascript Object.freeze(obj) obj.skill.year = 20 console.log(obj) ``` 咱們得到的結果實際上是這樣嬸兒的： ```json { name: "不想成熟的大叔", age: 37, skill: { name: "coding", year: 20 } } ``` 發現還是被修改了~ 這又是咋回事兒呢？這就說明 `Object.freeze()` 方法只能凍結當前物件的屬性，但是如果某個屬性的值還是一個物件或者陣列的話，那就說明這個屬性儲存的還是一個引用地址，實際的資料是儲存在這個引用地址中的。 想要解決這個問題其實也不算難，就是繼續利用 `Object.freeze()` 方法來凍結這個值為物件或者陣列的屬性就行了。就像這樣嬸兒操作： ```javascript Object.freeze(obj.skill) obj.skill.year = 20 console.log(obj) ``` 這樣咱們得到的結果就是： ```json { name: "不想成熟的大叔", age: 37, skill: { name: "coding", year: 15 } } ``` 也就是說，關於這個問題咱們想一勞永逸地解決掉，可以定義一個函式，把物件作為引數傳遞進去。然後，這個函式主要利用遞迴方式把物件中所有值為物件或者陣列的屬性分別進行凍結，窮盡為止就可以啦！ ## 寫在最後的話 好了，整到這兒，ES6 新增的 `const` 關鍵字所有大叔想和你嘮扯的內容都嘮扯完了，也希望能對你有所幫助。最後再說一句：我是不想成熟的大叔，為前端學習不再枯燥、困難和迷茫而努力。你覺得這樣學習前端技術有趣嗎？有什麼感受、想法，和好的建議可以在下面給大叔