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

2019-05-16 admin

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


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


clipboard.png

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

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

概述

constObject.freeze()完全不同。

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

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

例子:

Const

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

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

clipboard.png

最初,这适用于 varlet ,但不适用于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

clipboard.png

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

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

clipboard.png

我们肯定希望对象具有无法修改或删除的属性。但是 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

clipboard.png

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

好吧,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);

clipboard.png

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

要完全冻结对象及其嵌套属性,你可以编写自己的库或使用已有的库,如 Deepfreeze 或 <a>immutable-js</a>。

结论

constObject.freeze() 不一样,const 阻止重新分配,Object.freeze() 阻止不变性。

谢谢你的阅读,干杯🍻!


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

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

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


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

[转载]原文链接:https://segmentfault.com/a/1190000019192951

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65081.html

文章标题:JavaScript中Object.freeze()与Const之间的区别

相关文章
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
html5+JavaScript教程-微信打飞机小游戏源码
js &#x2F;&#x2F; JavaScript Document var c = document.getElementById(&quot;dotu&quot;); var cxt = c.getContext(&quot;2d&q...
2015-11-12
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
JavaScript编辑器推荐
主流编辑器有SublimeText,Notepad++,webstorm等,是使用最广泛的编辑器,但也有一些JavaScript编辑器提供有着各自的特性和功能,适应不同人的需求,以下是几款优秀的编辑器,相信你一定能找到自己喜欢的。 1. W...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
请前往任务中心完善资料即可激活会员
登录后,点击右上角的用户名,在下拉菜单中可以进去“我的任务” 注册自动激活,本站没有VIP!没有充值!没有推广任务等等 回复即可下载 ...
2015-11-18
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
回到顶部