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

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

成都创新互联是一家专业提供蜀山企业网站建设,专注与成都网站建设、成都网站制作、H5技术、小程序制作等业务。10年已为蜀山众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

当我们在 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定义的变量的值，会导致此错误：

 
 
 
 

  
  
  
  
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 中定义常量和配置非常有用。

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

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

网站题目：聊聊Const和Object.freeze()的区别
本文路径：http://www.csdahua.cn/qtweb/news44/238494.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网