const 和 Object.freeze() 的区别 ?

做者：Ashish Lahoti
译者：前端小智
来源：codingnconcepts

点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。javascript

最近开源了一个 Vue 组件，还不够完善，欢迎你们来一块儿完善它，也但愿你们能给个 star 支持一下，谢谢各位了。前端

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

这篇文章介绍了使用const和Object.freeze()在 JS中定义常量和配置值一些作法，以及它们之间的区别。java

当咱们在 JS 应用程序中定义常量和配置值时。它们应具备如下特色:git

• 跨应用程序可访问
• 量的值是不可变的
• 变量的引用应该是不可变的

接下来，咱们来一个个看下上面三个特征。github

使用 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和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。