JavaScript

JavaScript中const和Object.freeze（）的区别

Posted by cl9000 on March 21, 2020

人生不是一种享乐，而是一桩十分沉重的工作。 —— 列夫·托尔斯泰

作者：Ashish Lahoti
译者：cl9000
来源：https://codingnconcepts.com/javascript/const-vs-object-freeze/

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

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

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

现在，我们将尝试实现这些特征……

使用let

让我们使用来定义变量let，看看

1
2
3
4
5
6
7
8
let APP_NAME = "Coding N Concepts";

function getApplicationName() {
  APP_NAME = "Unkown App";
  return APP_NAME;
}

getApplicationName(); // Unkown App

在上面的示例中，函数getApplicationName()已更改的值APP_NAME。我们如何防止更改全局变量的值？

使用const

我们可以使用const定义一个常量变量来代替let防止其更改值。

1
2
3
4
5
6
const APP_NAME = "Coding N Concepts";

function getApplicationName() {
  APP_NAME = "Unkown App"; // This will throw TypeError
  return APP_NAME;
}

尝试更改使用const结果定义的变量的值，导致此错误：

“TypeError: Assignment to constant variable.”

就是这样吗？让我们看下输出

1
2
3
const fruits = ['mango', 'apple'];
fruits.push('banana');
console.log(fruits); // ['mango', 'apple', 'banana']
1
2
3
4
5
const constants = {
  APP_NAME : "Coding N Concepts"
};
constants.APP_NAME = "Unknown App";
console.log(constants.APP_NAME); // "Unknown App"

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

const不会使变量的值不可变，而是使变量的绑定不可变。

所有基本类型都喜欢 integer，boolean 并且通过值 string 绑定数据，而所有类型都喜欢 array 并且通过引用 object 绑定数据。

现在我们知道，在 array 和的情况下 object ，我们不能更改引用，但可以更改值。

那么我们如何防止改变 array 的值 object 呢？

使用Object.freeze（）

这是Object.freeze()发挥作用的地方。Object.freeze忽略值的变化object和array。

1
2
3
4
5
6
7
let constants = Object.freeze({
  APP_NAME : "Coding N Concepts"
});

constants.APP_NAME = "Unknown App";

console.log(constants.APP_NAME); // "Coding N Concepts"

您可以在示例中看到，如果您尝试更改值，它不会引发任何错误，但不会影响对象状态。

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

1
2
3
4
5
6
7
8
9
let constants = Object.freeze({
  APP_NAME : "Coding N Concepts"
});

constants = { 
  APP_NAME : "Unknown App"
};

console.log(constants.APP_NAME); // "Unknown App"

如果我们总结一下：

const不允许更改的引用，object或者array可以更改值。

Object.freeze()忽略object或array的值变化

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

一起使用const和Object.freeze（）

1
2
3
4
5
6
7
8
9
const constants = Object.freeze({
  APP_NAME : "Coding N Concepts"
});

constants.APP_NAME = "Unknown App"; // This is ignored

constants = { 
  APP_NAME : "Unknown App" 
}; // This will throw TypeError

上面的示例显示了将 const 和组合在一起 Object.freeze() 对于在 JavaScript 中定义常量和配置非常有用。

参考原文

原文：https://codingnconcepts.com/javascript/const-vs-object-freeze/


赏 支付宝打赏 微信打赏

赞赏一下 坚持原创技术分享，您的支持将鼓励我继续创作！



FEATURED TAGS
JavaScript
FRIENDS