原生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 相关文章推荐
javascript 兼容鼠标滚轮事件
Apr 07 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 Javascript
JavaScript学习笔记之JS事件对象
Jan 22 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
JS作用域深度解析
Dec 29 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 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
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
PHP之变量、常量学习笔记
2008/03/27 PHP
js去除重复字符串两种实现方法
2013/01/09 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
vue实现一拉到底的滑动验证
2019/07/25 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
浅谈python之新式类
2018/08/12 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
python三大神器之fabric使用教程
2019/06/10 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
Django 自定义分页器的实现代码
2019/11/24 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
Python如何实现的二分查找算法
2020/05/27 Python
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
师范学院毕业生求职信范文
2013/12/26 职场文书
应聘面试自我评价
2014/01/24 职场文书
大学社团活动总结
2014/04/26 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
鸦片战争观后感
2015/06/09 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers