const 和 Object.freeze() 的区别 ?

喜欢ヅ旅行 2022-12-22 11:16 106阅读 0赞

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

> **点赞再看，养成习惯**
> 
> **本文 `GitHub` [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。**

**最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。**

github 地址：[https://github.com/qq449245884/vue-okr-tree][https_github.com_qq449245884_vue-okr-tree]

这篇文章介绍了使用`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/javascript/const-vs-object-freeze/

## 交流 ##

文章每周持续更新，可以微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复**福利**，即可看到福利，你懂的。

[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi
[https_github.com_qq449245884_vue-okr-tree]: https://github.com/qq449245884/vue-okr-tree