javascript中const和Object.freeze()的差異

這篇文章介紹了使用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"

小結一下：

const不允許改變物件或陣列的參照，但可以改變其值。
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/javascript/const-vs-object-freeze/
作者：Ashish Lahoti
譯文地址：https://segmentfault.com/a/1190000038140180

更多程式設計相關知識，請存取：！！

以上就是javascript中const和Object.freeze()的差異的詳細內容，更多請關注TW511.COM其它相關文章！