原生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 相关文章推荐
js换图片效果可进行定时操作
Jun 09 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
vue-cli设置publicPath小记
Apr 14 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 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
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
常用PHP封装分页工具类
2017/01/14 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
jquery 学习之一 对象访问
2010/11/23 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
jQuery Ajax async=>false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
python数据归一化及三种方法详解
2019/08/06 Python
Python编程中类与类的关系详解
2019/08/08 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
大学生军训自我评价分享
2013/11/09 职场文书
夜班门卫岗位职责
2013/12/09 职场文书
班组长工作职责
2013/12/25 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL
A22国内电台短波广播频率表
2022/05/10 无线电
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python