原生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中的View-Model使用介绍
Aug 11 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
javaScript实现滚动条事件详解
Mar 24 Javascript
web前端vue filter 过滤器
Jan 12 Javascript
vue.js学习笔记之v-bind和v-on解析
May 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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
python中日期和时间格式化输出的方法小结
2015/03/19 Python
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
《水乡歌》教学反思
2014/04/24 职场文书
就业意向书
2014/07/29 职场文书
国庆节活动总结
2014/08/26 职场文书
会议新闻稿
2015/07/17 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
详解NodeJS模块化
2021/06/15 NodeJs
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL