理解Object.freeze()与const之间的区别

时间: 2020-09-07阅读: 197标签: 区别

自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()是使对象具有不可变性。

原文:The differences between Object.freeze() vs Const in JavaScript
作者:Bolaji Ayodeji


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9637

关闭

html中src与href的区别

写代码的时候就经常把这两个属性弄混淆,到底是href还是src,href表示超文本引用,用在link和a等元素上,href是引用和页面关联,是在当前元素和引用资源之间建立联系,src表示引用资源,表示替换当前元素,用在img,script,iframe上

Vue 中的 Props 与 Data 细微差别,你知道吗?

Vue提供了两种不同的存储变量:props和data。这些方法一开始可能会让人感到困惑,因为它们做的事情很相似,而且也不清楚什何时使用props,何时使用data。那么props和data有什么区别呢?

css link与@import的区别是什么?

link与@import的区别:link和import的语法结构不同,<link>是HTML标签,只能在HTML中使用,import是css样式,可以在HTML中通过<style>标签使用,或在css中直接使用。

css中word-spacing和letter-spacing的区别是什么?

CSS是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。

HTML中src和href之间的区别

src 主要用于元素替换,href 用于和相关文档和外部资源建立相关链接。href 属性说明本地Web资源和定义的资源建立了链接。

innerHTML、outerHTML、innerText、outerText的区别

innerHTML设置或获取位于对象起始和结束标签内的 HTML;outerHTML设置或获取对象及其内容的 HTML 形式;innerText 设置或获取位于对象起始和结束标签内的文本;outerText 设置(包括标签)或获取(不包括标签)对象的文本

原生开发、H5开发和混合开发的区别?

目前市场上主流的APP分为三种:原生APP、Web APP(即HTML5)和混合APP三种,相对应的定 制开发就是原生开发、H5开发和混合开发。那么这三种开发模式究竟有何不同呢?下面我们就分别从这三者各自的优劣势来区分比较吧

Js中parseInt()和Number()之间有什么区别?

Number()和parseInt()都可以用来进行数字的转换,那么parseInt()和Number()之间的区别是什么?parseInt()函数用于解析字符串并将其转换为指定基数的整数。它需要两个参数,要解析的字符串和要使用的基数。基数是一个介于2和36之间的整数,表示数字的基数。

js中isNaN和Number.isNaN的区别

isNaN判断传入的参数是否能转换成数字,并不是严格的判断是否等于NaN。Number.isNaN判断传入的参数是否严格的等于NaN(也就是 ===)。

https和http的主要区别

HTTPS和HTTP的区别主要如下:1、https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用。2、http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!