原生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 相关文章推荐
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
js读取cookie方法总结
Oct 31 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
jquery中实现时间戳与日期相互转换
Apr 12 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 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
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
php把session写入数据库示例
2014/02/26 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
js 窗口抖动示例
2013/09/04 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
用Python实现命令行闹钟脚本实例
2016/09/05 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
python pandas 时间日期的处理实现
2019/07/30 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
后勤部长岗位职责
2013/12/14 职场文书
给老师的一封建议书
2014/03/13 职场文书
2014年审计工作总结
2014/11/17 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
教师辞职信范文
2015/02/28 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL