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

时间 2019-11-06 标签 javascript object.freeze object freeze const 之间区别

翻译：疯狂的技术宅
https://medium.freecodecamp.o...

本文首发微信公众号：前端先锋
欢迎关注，天天都给你推送新鲜的前端技术文章javascript

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

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

概述

const和Object.freeze()彻底不一样。git

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

可变对象具备能够更改的属性。不可变的对象在建立对象后没有能够更改的属性。

例子：

Const

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

这将抛出一个 Uncaught TypeError，由于咱们试图从新给用 const 关键字声明的变量 user 赋值。这是没用的。程序员

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

const的问题

使用对象时，使用 const 仅阻止从新分配，而不是不可变性（可以阻止更改其属性）。面试

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

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

虽然咱们没法从新分配这个名为 object 的变量，但仍然能够改变对象自己。微信

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() 有点肤浅，你须要将它递归地应用于嵌套对象来保护它们。

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() 阻止不变性。

谢谢你的阅读，干杯🍻！

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...