关于javascript:const-和-Objectfreeze-的区别

36次阅读

共计 1979 个字符，预计需要花费 5 分钟才能阅读完成。

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

点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588… 上曾经收录，更多往期高赞文章的分类，也整顿了很多我的文档，和教程材料。欢送 Star 和欠缺，大家面试能够参照考点温习，心愿咱们一起有点货色。

最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。

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

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

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

跨应用程序可拜访
量的值是不可变的
变量的援用应该是不可变的

接下来，咱们来一个个看下下面三个特色。

咱们应用 let 来定义变量。

let APP_NAME = "前端小智 @大迁世界"

function getApplicationName() {
   APP_NAME = "他是谁？"
   return APP_NAME
}

getApplicationName() // "他是谁？"

在下面的示例中，函数 getApplicationName() 更改了 APP_NAME 的值。咱们要如何避免全局变量被更改？

咱们能够应用 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 疏忽对象和数组的值更改。

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 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 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复福利，即可看到福利，你懂的。

正文完