原生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 setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
js Math 对象的方法
Sep 01 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
微信小程序自定义底部弹出框
Nov 16 Javascript
前端防止用户重复提交js实现代码示例
Sep 07 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
vue的路由映射问题及解决方案
Oct 14 Javascript
基于ajax实现上传图片代码示例解析
Dec 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
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
php链表用法实例分析
2015/07/09 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
JavaScript中的私有成员
2006/09/18 Javascript
Display SQL Server Login Mode
2007/06/21 Javascript
Ext 表单布局实例代码
2009/04/30 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
python中的列表推导浅析
2014/04/26 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
opencv 阈值分割的具体使用
2020/07/08 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
什么是规则表达式
2012/05/03 面试题
城建学院毕业生自荐信
2014/01/31 职场文书
采购部部长岗位职责
2014/02/06 职场文书
教学评估实施方案
2014/03/16 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
靠谱的活动总结
2019/04/16 职场文书
gateway网关接口请求的校验方式
2021/07/15 Java/Android