JavaScript中的Object.freeze与const之间的区别(译)

monw3c 发布于2019-08-23 17:52 / 1437人阅读

摘要：一些开发人员特别是新手们会认为这两个功能的工作方式是一样的，但其实并不是。的问题使用声明的对象仅能阻止其重新分配，但是并不能使其声明的对象具有不可变性能够阻止更改其属性。因此，当具有嵌套属性的对象时，并不能完全冻结对象。

原文：The differences between Object.freeze() vs Const in JavaScript 
作者：Bolaji Ayodeji
本文经授权翻译转载，版权归原作者所有！

自ES6发布以来，ES6给JavaScript带来了一些新特性和方法。对于JavaScript开发者来说，这些特性能够很好地改善了我们的工作流程以及工作效率，其中的特性就包括 Object.freeze() 方法和 const 。

一些开发人员特别是新手们会认为这两个功能的工作方式是一样的，但其实并不是。让我来告诉你Object.freeze() 和 const 是如何不同的。

综述

const 和 Object.freeze() 完全不同。

const 的行为像 let 。它们唯一的区别是， const 定义了一个无法重新分配的变量。通过 const 声明的变量是具有块级作用域的，而不是像 var 声明的变量具有函数作用域。

Object.freeze() 接受一个对象作为参数，并返回一个相同的不可变的对象。这就意味着我们不能添加，删除或更改对象的任何属性。

可变对象的属性能够进行更改，而不可变对象在创建对象后不能更改其属性。

例子 const

const user = "Bolaji Ayodeji"
user = "Joe Nash"

这个例子会抛出一个Uncaught TypeError，因为我们正在尝试重新分配使用const关键字声明的变量user，这样做是无效的。

这个例子中使用 let 或者 var 声明是能够正常工作的，但是使用 const 并不能。

const 的问题

使用const声明的对象仅能阻止其重新分配，但是并不能使其声明的对象具有不可变性（能够阻止更改其属性）。

参考以下代码，我们使用const关键字声明了一个变量，并为其分配了一个名为user的对象。

const user = {
  first_name: "bolaji",
  last_name: "ayodeji",
  email: "hi@bolajiayodeji.com",
  net_worth: 2000
}
user.last_name = "Samson";
// this would work, user is still mutable!
user.net_worth = 983265975975950;
// this would work too, user is still mutable and getting rich :)!
console.log(user);  // user is mutated

尽管我们无法重新分配这个名为 user 的变量，但是我们仍然可以改变其对象本身。

const user = {
  user_name: "bolajiayodeji"
}
// won"t work

我们肯定希望对象具有无法修改或删除的属性。 const 无法实现这样的功能，但是 Object.freeze 可以。

Object.freeze()

要禁用对象的任何更改，我们需要使用 Object.freeze() 。

const user = {
  first_name: "bolaji",
  last_name: "ayodeji",
  email: "hi@bolajiayodeji.com",
  net_worth: 2000
}
Object.freeze(user);
user.last_name = "Samson";
// this won"t work, user is still immutable!
user.net_worth = 983265975975950;
// this won"t work too, user is still immutable and still broke :(!
console.log(user);  // user is immutated

具有嵌套属性的对象实际上并未冻结

Object.freeze 只是做了层浅冻结，当遇到具有嵌套属性的对象的时候，我们需要递归Object.freeze 来冻结具有嵌套属性的对象。

const user = {
  first_name: "bolaji",
  last_name: "ayodeji",
  contact: {
    email: "hi@bolajiayodeji.com",
    telephone: 08109445504,
  }
}

Object.freeze(user);
user.last_name = "Samson";
// this won"t work, user is still immutable!
user.contact.telephone = 07054394926;
// this will work because the nested object is not frozen
console.log(user);

因此，当具有嵌套属性的对象时， Object.freeze() 并不能完全冻结对象。

要完全冻结具有嵌套属性的对象，您可以编写自己的库或使用已有的库来冻结对象，如Deepfreeze 或 immutable-js

结论

const 和 Object.freeze() 并不同， const 是防止变量重新分配，而 Object.freeze() 是使对象具有不可变性。

感谢阅读，干杯！

GPU云服务器云服务器 javascript与js的区别 java与javascript的区别 js与javascript区别 javascript与java区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104286.html

【译】如何在 JavaScript 中使用对象的方法

摘要：中的所有对象都来自父的构造函数。不同于数组的原型方法例如和只能被数组实例使用，对象方法直接来自构造函数，并使用对象实例作为参数。这称为静态方法。创建对象的键值对的嵌套数组。可用于确定对象是否已冻结，并返回布尔值。原文：How To Use Object Methods in JavaScript作者：Tania Rascia译者：博轩介绍 JavaScript 中，对象是键/值 ...

longmon 2019-08-23 17:03 评论0 收藏0
JavaScript中Object.freeze()与Const之间的区别

摘要：与相比，这些功能更好地改善了我们的工作流程。一些开发人员尤其是新手们认为这两个功能的工作方式相同，但并不是。的行为类似于，唯一的区别是它定义了一个无法重新分配的变量。我们使用声明了一个变量，并为它分配了一个名为的对象。翻译：疯狂的技术宅https://medium.freecodecamp.o... 本文首发微信公众号：前端先锋欢迎关注，每天都给你推送新鲜的前端技术文章 sho...

SQC 2019-08-26 13:47 评论0 收藏0
javascript中对象的常用方法，深克隆和浅克隆以及冻结，扩展，密封三大属性的区别

摘要：它将返回目标对象。封闭对象方法判断一个对象是否被密封。为源对象为修改的属性名或设置，同上方法返回一个给定对象自身可枚举属性的键值对数组方法返回指定对象上一个自有属性对应的属性描述符方法判断两个值是否是相同的值。对象作为引用类型，工作中免不了复制对象，下面来看看克隆的方法 Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。浅...

gplane 2019-08-22 15:37 评论0 收藏0
关于ES模块你必须要知道的一些禁忌(一)

摘要：没有模块化的支持，使用开发大型应用将举步维艰，所以经过大量的实践，社区制定了一些模块加载方案，最主要的有运行于浏览器的方案和运行于以为代表的服务端的方案。该方法返回被冻结的对象。背景 ES Module是JavaScript在ES2015版本开始提供的语言标准级别的模块化方案，在此之前JavaScript一直没有语言级别的模块化体系。没有模块化的支持，使用JavaScript开发大型...

yexiaobai 2019-08-23 14:10 评论0 收藏0
JavaScript 函数式编程导论

摘要：函数式编程导论从属于笔者的前端入门与工程实践。函数式编程即是在软件开发的工程中避免使用共享状态可变状态以及副作用。 JavaScript 函数式编程导论从属于笔者的Web 前端入门与工程实践。本文很多地方是讲解函数式编程的优势，就笔者个人而言是认可函数式编程具有一定的好处，但是不推崇彻底的函数式编程化，特别是对于复杂应用逻辑的开发。笔者在应用的状态管理工具中就更倾向于使用MobX而不是...

forrest23 2019-08-20 13:38 评论0 收藏0