JS中Object.freeze()与Const之间的区别[每日前端夜话0x6A]

疯狂的技术宅

发布于 2019-05-17 11:41:33

1.1K0

发布于 2019-05-17 11:41:33

文章被收录于专栏：京程一灯

ES6 自发布以来为 JavaScript 带来了一些新功能和方法。与 JavaScript 相比，这些功能更好地改善了我们的工作流程。这些新功能包括 Object.freeze() 方法和 const。

一些开发人员尤其是新手们认为这两个功能的工作方式相同，但并不是。 Object.freeze() 和 const 的工作方式是不同的。

概述

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

const 的行为类似于 let，唯一的区别是它定义了一个无法重新分配的变量。由 const 声明的变量是块作用域，而不是像 var那样的函数作用域
Object.freeze() 将一个对象作为参数，并返回与不可变对象相同的对象。这意味着你不能添加、删除或更改对象的属性。

可变对象具有可以更改的属性。不可变的对象在创建对象后没有可以更改的属性。

例子：

Const

1const user = 'Bolaji Ayodeji'
2user = 'Joe Nash'

这将抛出一个 Uncaught TypeError，因为我们试图重新给用 const 关键字声明的变量 user 赋值。这是没用的。

最初，这适用于 var 或 let ，但不适用于const

const的问题

使用对象时，使用 const 仅阻止重新分配，而不是不可变性（能够阻止更改其属性）。

请考虑以下代码。我们使用 const 声明了一个变量，并为它分配了一个名为 user 的对象。

 1const user = {
 2  first_name: 'bolaji',
 3  last_name: 'ayodeji',
 4  email: 'hi@bolajiayodeji.com',
 5  net_worth: 2000
 6}
 7user.last_name = 'Samson';
 8// this would work, user is still mutable!
 9user.net_worth = 983265975975950;
10// this would work too, user is still mutable and getting rich :)!
11console.log(user);  // user is mutated

虽然我们无法重新分配这个名为 object 的变量，但仍然可以改变对象本身。

1const user = {
2  user_name: 'bolajiayodeji'
3}
4// won't work

我们肯定希望对象具有无法修改或删除的属性。但是 const 做不到，这就是 Object.freeze() 存在的意义?。

Object.freeze()

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

 1const user = {
 2  first_name: 'bolaji',
 3  last_name: 'ayodeji',
 4  email: 'hi@bolajiayodeji.com',
 5  net_worth: 2000
 6}
 7Object.freeze(user);
 8user.last_name = 'Samson';
 9// this won't work, user is still immutable!
10user.net_worth = 983265975975950;
11// this won't work too, user is still immutable and still broke :(!
12console.log(user);  // user is immutated

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

好吧，Object.freeze() 有点肤浅，你需要将它递归地应用于嵌套对象来保护它们。

 1const user = {
 2  first_name: 'bolaji',
 3  last_name: 'ayodeji',
 4  contact: {
 5    email: 'hi@bolajiayodeji.com',
 6    telephone: 08109445504,
 7  }
 8}
 9Object.freeze(user);
10user.last_name = 'Samson';
11// this won't work, user is still immutable!
12user.contact.telephone = 07054394926;
13// this will work because the nested object is not frozen
14console.log(user);

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-05-15，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

javascript

本文分享自前端先锋微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

javascript

登录后参与评论

0 条评论

热度