原生JavaScript创建不可变对象的方法简单示例


Posted in Javascript onMay 07, 2020

本文实例讲述了原生JavaScript创建不可变对象的方法。分享给大家供大家参考,具体如下:

原生JavaScript创建不可变对象的方法简单示例

Javascript是一种灵活的语言,你可以重新定义任何东西,但是当项目变得复杂时,我们会发现可变数据结构的问题。随着JavaScript的最新版本的发布这种情况发生了改变。现在可以创建不可变的对象了。本文介绍如何用三种不同的方法来做。

对象的不变性意味着我们不希望对象在创建后即以任何方式更改(将它们设置为只读类型)。

假设我们需要定义一个 car 对象,并在整个项目中使用它的属性来执行操作。我们不能允许错误地修改任何数据。

const myTesla = {
 maxSpeed: 155,
 batteryLife: 300,
 weight: 2300
};

Object.preventExtensions() 防止扩展

此方法可防止向现有对象添加新属性,preventExtensions() 是不可逆的操作,我们永远不能再向对象添加额外的属性。

Object.isExtensible(myTesla); // true
Object.preventExtensions(myTesla);
Object.isExtensible(myTesla); // false
myTesla.color = 'blue';
console.log(myTesla.color) // undefined

Object.seal() 密封

它可以防止添加或删除属性,seal() 还可以防止修改属性描述符。

Object.isSealed(myTesla); // false
Object.seal(myTesla);
Object.isSealed(myTesla); // true

myTesla.color = 'blue';
console.log(myTesla.color); // undefined

delete myTesla.batteryLife; // false
console.log(myTesla.batteryLife); // 300

Object.defineProperty(myTesla, 'batteryLife'); // TypeError: Cannot redefine property: batteryLife

Object.freeze() 冻结

它的作用与 Object.seal() 相同,而且它使属性不可写。

Object.isFrozen(myTesla); // false
Object.freeze(myTesla);
Object.isFrozen(myTesla); // true

myTesla.color = 'blue';
console.log(myTesla.color); // undefined

delete myTesla.batteryLife;
console.log(myTesla.batteryLife); // 300

Object.defineProperty(myTesla, 'batteryLife'); // TypeError: Cannot redefine property: batteryLife

myTesla.batteryLife = 400;
console.log(myTesla.batteryLife); // 300

提示

如果希望在尝试修改不可变对象时抛出错误,请使用严格模式。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
DIV始终居中的js代码
Feb 17 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
JsChart组件使用详解
Mar 04 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
Vue中的字符串模板的使用
May 17 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
分享15个Webpack实用的插件!!!
Mar 31 Javascript
从原生JavaScript到React深入理解
Jul 23 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 #Javascript
基于javascript实现日历功能原理及代码实例
May 07 #Javascript
Vue简单实现原理详解
May 07 #Javascript
angular组件间通讯的实现方法示例
May 07 #Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 #Javascript
Vue双向绑定实现原理与方法详解
May 07 #Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 #Javascript
You might like
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
AngularJS中transclude用法详解
2016/11/03 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
python程序需要编译吗
2020/06/19 Python
Python ellipsis 的用法详解
2020/11/20 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
土木工程专业个人求职信
2013/12/05 职场文书
小学生防溺水广播稿
2014/01/12 职场文书
安全生产月演讲稿
2014/05/09 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
关于安全的广播稿
2014/10/23 职场文书
辞职信如何写
2015/02/27 职场文书
毕业证明模板
2015/06/19 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
关于 Python json中load和loads区别
2021/11/07 Python
sql server 累计求和实现代码
2022/02/28 SQL Server