const 和 Object.freeze() 的區別 ?

做者：Ashish Lahoti
譯者：前端小智
來源：codingnconcepts

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

最近開源了一個 Vue 組件，還不夠完善，歡迎你們來一塊兒完善它，也但願你們能給個 star 支持一下，謝謝各位了。

github 地址：https://github.com/qq44924588...

這篇文章介紹了使用const和Object.freeze()在 JS中定義常量和配置值一些作法，以及它們之間的區別。

當咱們在 JS 應用程序中定義常量和配置值時。它們應具備如下特色:

• 跨應用程序可訪問
• 量的值是不可變的
• 變量的引用應該是不可變的

接下來，咱們來一個個看下上面三個特徵。

使用 let

咱們使用 let 來定義變量。

let APP_NAME = "前端小智@大遷世界"

function getApplicationName() {
   APP_NAME = "他是誰？"
   return APP_NAME
}

getApplicationName() // "他是誰？"

在上面的示例中，函數getApplicationName()更改了APP_NAME的值。 咱們要如何防止全局變量被更改？

使用 const

咱們可使用 const 來定義，這樣全局變量就不會被更改到？

const  APP_NAME = "前端小智@大遷世界"

function getApplicationName() {
   APP_NAME = "他是誰？"
   return APP_NAME // 這裏會拋出 TypeError 錯誤
}

試圖更改使用const定義的變量的值，會致使此錯誤：

「TypeError: Assignment to constant variable.」

const 能防止變量值被更改嗎？，看下面操做：

const fruites = ['葡萄', '哈密瓜']
fruites.push('香蕉')

console.log(fruites ) //  ["葡萄", "哈密瓜", "香蕉"]

const constants = {
  APP_NAME: "前端小智@大遷世界"
}
constants.APP_NAME = "他是誰?"
console.log(constants.APP_NAME) // 他是誰?

從上面的兩個例子中能夠看出，即便使用const，也能夠改變數組或對象的值。

const 不是使用變量的值不可變，而是變量的引用地址來可變。

如今咱們知道，在數組和對象的狀況下，咱們不能改變引用，但能夠改變值。如何防止數組和對象的值被改變？

使用 Object.freeze()

這是Object.freeze()起做用的地方，Object.freeze 忽略對象和數組的值更改。

let constants = Object.freeze({
  APP_NAME: "前端小智@大遷世界"
})
constants.APP_NAME = "他是誰?"
console.log(constants.APP_NAME) // "前端小智@大遷世界"

能夠從示例中看到，若是更改值，它不會拋出任何錯誤，也不會影響對象狀態。

Object.freeze() 能夠防止更改對象的值，但不能阻止引用的更改：

let constants = Object.freeze({
  APP_NAME: "前端小智@大遷世界"
})
constants = {
   APP_NAME : "Unknown App"
}
console.log(constants.APP_NAME); // "Unknown App"

小結一下：

1. const不容許改變對象或數組的引用，但能夠改變其值。
2. Object.freeze() 忽略對象或數組的值更改

把它們組合在一塊兒將防止更改對象或數組的引用和值

一塊兒使用 const 和 Object.freeze()

const constants = Object.freeze({
  APP_NAME : "Coding N Concepts"
});

constants.APP_NAME = "Unknown App"; // 這被忽略

constants = { 
  APP_NAME : "Unknown App" 
}; // 這將拋出TypeError

上面的示例代表，將const和Object.freeze()結合使用對於在 JS 中定義常量和配置很是有用。

---

原文：https://codingnconcepts.com/j...

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。