原生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小游戏之宇宙战机源码详解
Sep 25 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
javascript三种代码注释方法
Jun 02 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
uniapp实现可滑动选项卡
Oct 21 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 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
php下获取http状态的实现代码
2014/05/09 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
php实现的简单日志写入函数
2015/03/31 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
类似CSDN图片切换效果脚本
2009/09/17 Javascript
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
关于js datetime的那点事
2011/11/15 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
python程序需要编译吗
2020/06/19 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
幼儿园新学期寄语
2014/01/18 职场文书
预备党员半年考察意见
2015/06/01 职场文书