聊聊Const 和 Object.freeze() 的区别

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

 [[353001]]

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

当我们在 JS 应用程序中定义常量和配置值时。它们应具有以下特点:

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

接下来,我们来一个个看下上面三个特征。

使用 let

我们使用 let 来定义变量。

  1. let APP_NAME = "前端小智@大迁世界" 
  2.  
  3. function getApplicationName() { 
  4.    APP_NAME = "他是谁?" 
  5.    return APP_NAME 
  6.  
  7. getApplicationName() // "他是谁?" 

在上面的示例中,函数getApplicationName()更改了APP_NAME的值。我们要如何防止全局变量被更改?

使用 const

我们可以使用 const 来定义,这样全局变量就不会被更改到?

  1. const  APP_NAME = "前端小智@大迁世界" 
  2.  
  3. function getApplicationName() { 
  4.    APP_NAME = "他是谁?" 
  5.    return APP_NAME // 这里会抛出 TypeError 错误 

试图更改使用const定义的变量的值,会导致此错误:

  1. const fruites = ['葡萄''哈密瓜'
  2. fruites.push('香蕉'
  3.  
  4. console.log(fruites ) //  ["葡萄""哈密瓜""香蕉"
  1. const constants = { 
  2.   APP_NAME: "前端小智@大迁世界" 
  3. constants.APP_NAME = "他是谁?" 
  4. console.log(constants.APP_NAME) // 他是谁? 

从上面的两个例子中可以看出,即使使用const,也可以改变数组或对象的值。

const 不是使用变量的值不可变,而是变量的引用地址来可变。

现在我们知道,在数组和对象的情况下,我们不能改变引用,但可以改变值。如何防止数组和对象的值被改变?

使用 Object.freeze()

这是Object.freeze()起作用的地方,Object.freeze 忽略对象和数组的值更改。

  1. let constants = Object.freeze({ 
  2.   APP_NAME: "前端小智@大迁世界" 
  3. }) 
  4. constants.APP_NAME = "他是谁?" 
  5. console.log(constants.APP_NAME) // "前端小智@大迁世界" 

可以从示例中看到,如果更改值,它不会抛出任何错误,也不会影响对象状态。

Object.freeze() 可以防止更改对象的值,但不能阻止引用的更改:

  1. let constants = Object.freeze({ 
  2.   APP_NAME: "前端小智@大迁世界" 
  3. }) 
  4. constants = { 
  5.    APP_NAME : "Unknown App" 
  6. console.log(constants.APP_NAME); // "Unknown App" 

小结一下:

  1. const不允许改变对象或数组的引用,但可以改变其值。
  2. Object.freeze() 忽略对象或数组的值更改

把它们组合在一起将防止更改对象或数组的引用和值

一起使用 const 和 Object.freeze()

  1. const constants = Object.freeze({ 
  2.   APP_NAME : "Coding N Concepts" 
  3. }); 
  4.  
  5. constants.APP_NAME = "Unknown App"; // 这被忽略 
  6.  
  7. constants = {  
  8.   APP_NAME : "Unknown App"  
  9. }; // 这将抛出TypeError 

上面的示例表明,将const和Object.freeze()结合使用对于在 JS 中定义常量和配置非常有用。

作者:Ashish Lahoti 译者:前端小智 来源:codingnconcepts 原文:https://codingnconcepts.com/javascript/const-vs-object-freeze/

本文转载自微信公众号「大迁世界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号。

 

责任编辑:武晓燕 来源: 大迁世界
相关推荐

2021-08-04 08:33:59

TypeScriptConst Readonly

2009-08-27 10:54:09

C# const和st

2021-12-20 09:53:51

用户态内核态应用程序

2022-05-13 09:05:37

JSObject无序

2022-10-12 09:01:52

Linux内核线程

2021-01-11 11:56:22

Apt 应用程序

2021-07-16 07:26:48

ES6javascript开发语言

2021-11-09 10:38:16

C++Const指针

2022-05-16 08:03:12

MySQL数据库

2023-12-01 13:47:45

C语言conststat

2023-12-06 08:26:19

Service数据库

2022-05-26 09:09:08

NetOpsDevOpsNetSecOps

2022-06-07 09:30:36

URLURN

2018-12-06 14:56:46

微服务隔离熔断

2022-10-24 00:03:26

GolangNew函数

2021-11-14 05:00:56

排查Sdk方式

2024-03-11 08:34:43

同步异步调用

2021-03-29 08:54:42

StampedLock线程开发技术

2022-09-14 08:00:00

区块链加密货币挖矿

2022-03-11 20:46:01

机制命令kerberos
点赞
收藏

51CTO技术栈公众号